连续的 ajax 调用会冻结 chrome 和 IE

consecutive ajax calls freeze chrome and IE

本文关键字：chrome IE 冻结 ajax 调用 连续      更新时间：2023-09-26

我得到了一个奇怪的。我必须连续进行几次 ajax 调用，当调用完成时，我会更新进度条。这在FF上完美运行，但在其余浏览器上，发生的事情是屏幕冻结，直到所有调用完成。

我不是在循环中执行调用，但是通过使用某种递归，因为需要做很多检查，并且循环不方便。

当我使用循环尝试同样的事情时，结果或多或少是相同的。Chrome 或 IE 不会更新屏幕，直到所有 ajax 请求完成。

我注意到的是它在FF和opera上工作正常，但是chrome（我想也是野生动物园）和IE9的行为很奇怪。同样在 Chrome 上，在这些请求期间，上一个请求的响应正文为空，并且将保持原样，直到所有请求都完成。

有什么想法吗？

代码是广泛的，但在这里。有一个 ajax 的包装器，$（db）.bind 是成功的回调。db.records 是 Json 结果。模型是具有多个控制器功能的对象

$(db).bind('tokenComplete',function(){
var x = db.records;
if (!x.success) { model.callRollBack(); return false; }
var next = parseInt(x.get.num)+ 1;
if (typeof x.post.tokens[next] != 'undefined') {
    model.executeToken(next,x.post);
}
else { 
    model.progressCurrent.find('div.report').html('all done!!');
}

}）;

model = {
drawProgressBarsTotal : function(el,i,v) {
    var p = Math.floor(100 * i / versions.total);
    el.find('span').html(p);
    el.find('div.report').html('updating to : ' + v.version);
    el.find('.changeLog').html(v.changeLog);
    el.find('.changeLog').parents('div').show();
    el.find('img').css({'background-position': 100 - p + '% 100%'});
},
executeToken : function(i,x) {
    if (this.fail == true) { return; }
    this.drawProgressBarsCurrent(this.progressCurrent,i+1,x);
    db.trigger = 'tokenComplete';
    db.data = x;
    db.url = dbDefaults.url + '?num='+i+'&action='+x.tokens[i];//bring the first
    $(db).loadStore(db);
}

}

负载存储 ：

$.dataStore = function( ds ) {
    $.fn.loadStore = function(ds){
        $.ajax({
            type: ds.method,
            url: ds.url,
            data: ds.data,
            dataType: ds.dataType,
            cache:false,
            async:true,
            timeout:ds.timeout?ds.timeout:10000,                
            queue: "autocomplete",
            contentType:'application/x-www-form-urlencoded;charset=utf-8',
            accepts: {
                xml: "application/xml, text/xml",
                json: "application/json, text/json",
                _default: "*/*"
            },
            beforeSend:function(){
                loadStatus = true;
            },
            success: function(data) {
                loadStatus = false;
                if(data)
                {ds.records=data;}
                $(ds).trigger(ds.trigger);
            },              
            error: function()
            {                   
                loadStatus = false;         
                $(ds).trigger('loadError');
            }
        });//END AJAX
    };//END LOADSTORE
    try {
        return ds;
    } finally {
        ds = null;
    }
}

}

没有遵循您的整个代码，但听起来您的问题可能与连续代码执行有关。通常，UI 不会在连续代码执行期间更新。要解决此问题，对 setTimeout（） 的任何调用或任何 ajax 调用都应允许浏览器有时间更新 UI。基本上，您必须短暂停止代码，然后重新启动它。

function updateUI () {
   // change ui state
   document.setTimeout( updateUI, 1 );
}

如果我在这里偏离了基地，请告诉我。

相关文章：