我正在对我的Web服务器进行AJAX调用,从而获取了很多数据。我显示了一个加载图像,该图像在执行ajax调用时旋转,然后逐渐消失。
我注意到的是,此特定呼叫上的所有浏览器都将使其在7秒钟内无响应。话虽这么说,加载图像并没有像我在获取时所计划的那样旋转。
我不知道这是不是发生了某种事情,或者是否有办法解决,在某种意义上说是导致有一个fork()使其做1件事,而我的加载图标仍然旋转。
有想法吗?有想法吗?
以下是某人希望看到的代码:
$("div.loadingImage").fadeIn(500);//.show(); setTimeout(function(){ $.ajax({ type: "POST", url: WEBSERVICE_URL + "/getChildrenFromTelTree", dataType: "json", async: true, contentType: "application/json", data: JSON.stringify({ "pText": parentText, "pValue": parentValue, "pr_id": LOGGED_IN_PR_ID, "query_input": $("#queryInput").val() }), success: function (result, textStatus, jqXHR) { //alert("winning"); //var childNodes = eval(result["getChildrenFromTelTreeResult"]); if (result.getChildrenFromTelTreeResult == "") { alert("No Children"); } else { var childNodes = JSON.parse(result.getChildrenFromTelTreeResult); var newChild; //alert('pText: '+parentText+"\npValue: "+parentValue+"\nPorofileID: "+ LOGGED_IN_PR_ID+"\n\nFilter Input; "+$("#queryInput").val() ); //alert(childNodes.length); for (var i = 0; i < childNodes.length; i++) { TV.trackChanges(); newChild = new Telerik.Web.UI.RadTreeNode(); newChild.set_text(childNodes[i].pText); newChild.set_value(childNodes[i].pValue); //confirmed that newChild is set to ServerSide through debug and get_expandMode(); parentNode.get_nodes().add(newChild); TV.commitChanges(); var parts = childNodes[i].pValue.split(","); if (parts[0] != "{fe_id}" && parts[0] != "{un_fe_id}") { newChild.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSide); } } } //TV.expand(); //recurseStart(TV); }, error: function (xhr, status, message) { alert("errrrrror"); } }).always(function () { $("div.loadingImage").fadeOut(); }); },500);
我的一个同事注意到了这个问题,建议我添加一个setTimeout(function(){..},500); 但它不能解决当前问题,因此很可能会将其删除。
由于JavaScript是单线程的,因此许多同步处理将使事件队列挂起并阻止其他代码执行。在您的情况下,是因为for循环会在浏览器执行期间锁定浏览器。
您可以尝试将所有迭代放入事件队列中。
for (var i = 0 ; i < childNodes.length ; i = i + 1) { (function(i) { setTimeout(function(i) { // code-here }, 0) })(i) }
这应该使处理间隔开,而不是迫使浏览器立即完成所有处理。自执行功能在那里创建一个闭包以保持循环计数器i的值。