1

私は奇妙なものを手に入れました。いくつかの連続した ajax 呼び出しを行う必要があり、呼び出しが完了するとプログレス バーが更新されます。これは FF では完全に機能しますが、残りのブラウザーでは、すべての呼び出しが完了するまで画面がフリーズします。

私は呼び出しをループで実行していませんが、ある種の再帰を使用すると、実行する必要がある多くのチェックが発生し、ループは便利ではありません。

ループを使用して同じことを試したところ、結果は多かれ少なかれ同じでした。Chrome または IE は、すべての ajax リクエストが完了するまで画面を更新しませんでした。

私が気づいたのは、FF とオペラでは問題なく動作することですが、クロム (サファリもそうだと思います) と 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;
    }

}

}

4

1 に答える 1

2

コード全体をフォローしていませんが、問題はコードの継続的な実行に関連しているようです。通常、コードの連続実行中は UI は更新されません。これを修正するには、setTimeout() への呼び出しまたは ajax 呼び出しで、ブラウザーが UI を更新する時間を確保する必要があります。基本的に、コードを一時的に停止してから、再度開始する必要があります。

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

私がここで基地から外れている場合は、お知らせください。

于 2012-06-12T18:58:45.323 に答える