多个 Ajax 调用，而一个 Ajax 调用仍在运行

Question

我遇到了一些进度条更新问题。我喜欢做的是，触发一个需要一些时间才能完成的 ajax 调用，在此调用期间，我想触发按间隔设置的 ajax 调用以更新我的进度条。

由于我找不到解决方案，只找到了浏览器的限制，这将与此处匹配。它始终最多 2 个呼叫处于活动状态。

尽管如此，我的第二个电话在谷歌浏览器中仍然处于待处理状态，直到我的第一个（主要）电话完成。

编辑：完整的jquery脚本

// update cars cache
$('#cars_cache_update_run').bind('click', function(){
    // remove button
    $(this).remove();
    // hide import widgets
    $('#products_import_widget').css('display', 'none');
    $('#vehicles_import_widget').css('display', 'none');
    $('#orders_import_widget').css('display', 'none');
    $('#test_data_widget').css('display', 'none');
    // show blind
    $('#cars_cache_update_info').css('display', 'none');
    $('#cars_cache_update_blind').css('display', 'inline');
    var carsUpdateInterval = setInterval(function() {
        getImportState('http://localhost/index.php/import/import_state/cache_update', 'cars_import_progressbar');
    }, 1000);
    // ajax request
    $.ajax({
        url: "http://localhost/index.php/import/cars_cache",
        async : true,
        success: function(data){
            $('#cars_cache_update_blind').css('display', 'none');
            $('#cars_cache_update_success').css('display', 'inline');
            clearInterval(carsUpdateInterval);
        },
        error: function(thrownError){
            $('#cars_cache_update_blind').css('display', 'none');
            $('#cars_cache_update_error').css('display', 'inline');
            $('#cars_cache_update_error_msg').html(thrownError);
        }
    });
});
function getImportState(url, id)
{
    $.ajax({
        url: url,
        success: function(data){
            var json = $.parseJSON(data);
            $.each(json, function(i, item) {
                var progressbar_value = json[i]['state'];
                $( "#"+id ).progressbar({
                    value: progressbar_value
                });
            })
        }
    });
}

另一个有趣的事情，如果我通过 $.get 调用间隔请求，我会得到一个奇怪的错误。使用 Codeignitor Framework。

GET http://localhost/[object%20Object] 404 (Not Found) jquery.1.7.min.js:4
send jquery.1.7.min.js:4
f.extend.ajax jquery.1.7.min.js:4
f.(anonymous function) jquery.1.7.min.js:4
(anonymous function)

非常感谢您的帮助，现在已经尝试了几个小时..也许我只是一个菜鸟。哈哈。

无根

Answer 1

不要调用多个带有间隔的 ajax。尝试这样的事情：

function updateProgress(){
    $.ajax({
        url: "http://localhost/index.php/import/import_state/cache_update",
        success: function(data){
            var json = $.parseJSON(data);
            $.each(json, function(i, item) {
                var progressbar_value = json[i]['state'];
                $( "#cars_import_progressbar" ).progressbar({
                    value: progressbar_value
                });
            });
            updateProgress(); // after success, call the same function again
        }
    });
}
updateProgress(); // start updateProgress

希望有帮助：]