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

我正在对我的web服务器进行AJAX调用，它会获取大量数据。我展示了一个加载图像，它在执行ajax调用时旋转，然后消失

我注意到的是，这个特定调用中的所有浏览器都会使它在大约7秒钟内没有响应。这就是说，加载映像并不像我在获取时计划的那样旋转

我不知道这是不是真的发生了什么，或者是否有办法，从某种意义上说，导致出现一个fork（），这样它可以做一件事，而我的加载图标仍然旋转

想法？想法

下面是一些人希望看到的代码：

$("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);

$（“div.loadingImage”）.fadeIn（500）；/。show（）；
setTimeout（函数（）{
$.ajax({
类型：“POST”，
url:WEBSERVICE_url+“/getChildrenFromTelTree”，
数据类型：“json”，
async:true，
contentType:“应用程序/json”，
数据：JSON.stringify({
“pText”：父文本，
“pValue”：父值，
“pr_id”：已登录的pr_id，
“查询输入”：$（“#查询输入”）.val（）
}),
成功：函数（结果、文本状态、jqXHR）{
//警惕（“获胜”）；
//var childNodes=eval（结果[“getChildrenFromTelTreeResult”]）；
如果（result.getChildrenFromTelTreeResult==“”）{
警惕（“无儿童”）；
}否则{
var childNodes=JSON.parse（result.getChildrenFromTelTreeResult）；
var newChild；
//警报（'pText:'+parentText+“\npValue:”+parentValue+“\nProfileId:“+LOGGED_IN_PR_ID+”\n\n过滤器输入；“+$（“#查询输入”）.val（））；
//警报（childNodes.length）；
对于（var i=0；i

---

我的一位同事注意到了这个问题，建议我添加一个setTimeout（function（）{..}，500）；但是它不能解决当前的问题，因此它很可能会被删除。

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

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

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

for（变量i=0；i

---

这应该将处理分隔开，而不是强制浏览器一次完成所有处理。自动执行函数用于创建一个闭包，以保持循环计数器i的值。

您没有使用

async:false

对吗？您应该显示ajax调用的代码。这就像请求帮助解决汽车的问题，但你没有打开引擎盖让我们看到里面。我打赌这是在

for

循环中创建的对象。试着注释掉它里面的所有内容（但保留循环本身），看看这是否加快了速度。@MrOBrian我注释掉了forloop的内容，运行大约半秒钟就完成了。似乎是执行这个循环导致了挂起，是循环中所有的对象创建和DOM操作导致了挂起，循环本身应该运行得很快。您可能需要想出一些其他方法将所有这些对象添加到页面中。有一件事可能会稍微加快它的速度，那就是使它们被添加到的元素在循环之前不可见，然后在循环之后再次可见，这样它就不会在每次迭代时都被重新绘制，而不是“setTimeout（function（i）{//code here}，0，i）”