在获得响应并执行成功时，AJAX调用会冻结浏览器一段时间

我正在对我的网络服务器进行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); 

我的一个corworker发现了这个问题，并建议我添加一个setTimeout（function（）{..}，500）; 但它并没有解决手头的问题，因此很可能会被删除。

Answer 1

由于JavaScript是单线程的，因此许多同步处理会挂起事件队列并阻止其他代码执行。 在您的情况下，它是for循环，它在执行时锁定浏览器。

您可以尝试将所有迭代放入事件队列中。

 for (var i = 0 ; i < childNodes.length ; i = i + 1) { (function(i) { setTimeout(function(i) { // code-here }, 0) })(i) } 

这应该使处理空间化，而不是强制浏览器立即完成所有操作。 自执行函数用于创建闭包以保持循环计数器i的值。