完成所有 ajax 请求后执行代码答案

【问题标题】：perform code once all ajax requests are completed完成所有 ajax 请求后执行代码
【发布时间】：2011-02-18 14:37:05
【问题描述】：

我有一个相当复杂的搜索，它利用了多个 ajax 调用，流程如下：

user performs search on button click
ajax request is made to php page which returns json data
    for each result in returned data additional ajax request is made
        run function which makes additional ajax call
    end for each
end click function

这一切都很好，我想做的是在 div 中显示加载消息并禁用搜索按钮，然后当所有 ajax 请求完成后重新启用按钮并删除加载消息。

我的脚本在下面，此时按钮的禁用/重新启用几乎是瞬间发生的，我认为因为 ajax 调用是异步的，一旦所有 ajax 请求，我该如何重新启用按钮并删除加载消息完成并显示数据了吗？？

$('#advKeyBtn').live('click', function() {
        $('#advKeyBtn').attr('disabled', 'disabled');
        $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...');
        $('#results').html(''); //clear existing contents
        $('#borough_links').html(''); //clear existing contents
        // handler for advance search button
        var myUrl = 'getKeyBoroughs.php';
        var myKeys = $('#keywords').val();
        var myType = $('input[name=keyParams]:checked').val()       
        $.ajax({
            url: myUrl,
            data: "keys=" + myKeys +'&type='+myType,
            type: "POST",
            traditional: false,
            dataType: 'json',
            error: function(xhr, statusText, errorThrown){
                // Work out what the error was and display the appropriate message
            },
            success: function(myData){
                // data retrived ok
                $.each(myData.boroughs, function( intIndex, objValue ){
                    //alert(myData.boroughs[intIndex].Borough_ID);
                    makeCSS(myData.boroughs[intIndex].Borough_ID);


    getKeyLocations(myData.boroughs[intIndex].Borough_ID)
                    })
                    //$('#'+divId).append(myData)//construct location holders
                }
            });
            $('#advKeyBtn').attr('disabled', '');
            $('#searchStatus').html('Search Complete, click on an area to view locations');
        });

以及从主 ajax 调用的初始成功中调用的函数

function getKeyLocations(id){
                    var myUrl = 'getKeyLocations.php';
                    var myBorough = id;
                    var myKeys = $('#keywords').val();
                    var myType = $('input[name=keyParams]:checked').val()   
                    var divId = '#borough_'+ id;
                    $.ajax({
                        url: myUrl,
                        type: 'POST',
                        data: 'borough_id='+myBorough+'&keys='+myKeys,
                        error: function(xhr, statusText, errorThrown){
                            // Work out what the error was and display the appropriate message
                        },
                        success: function(myData){
                            $(divId).html(myData);
                        }
                    });
                };

【问题讨论】：

看起来您的客户端 javascript 执行通常由服务器处理的控制器级功能。这是你安排事情的唯一方法吗？

标签： jquery ajax

【解决方案1】：

你想要ajaxStart 和ajaxStop，这里有一些显示加载屏幕的代码。这么好的一个小班轮。

$('.loadingElement')
     .ajaxStart(function() { this.show(); })
     .ajaxStop(function() { this.hide(); });

对于您的特定用途，代码看起来像

$('#advKeyBtn')
     .ajaxStart(function() { this.attr('disabled', 'disabled'); })
     .ajaxStop(function() { this.attr('disabled', ''); });

jquery: ajaxStart

每当一个 Ajax 请求即将被发送时，jQuery 都会检查是否还有任何其他未完成的 Ajax 请求。如果没有人在进度，jQuery 触发 ajaxStart 事件。任何和所有处理程序已使用 .ajaxStart() 方法注册的代码将在这次。

jquery: ajaxStop

每当一个 Ajax 请求完成时，jQuery 都会检查是否有任何其他未完成的 Ajax 请求。如果没有剩余，jQuery 触发 ajaxStop 事件。已注册的所有处理程序此时执行 .ajaxStop() 方法。 ajaxStop 如果最后一个未完成的 Ajax 请求是通过在 beforeSend 回调函数中返回 false 来取消。

来自malsup，关于ajaxStop 和ajaxComplete 的区别：

ajaxStop 在未完成的 ajax 请求数时触发达到零。 ajaxComplete 在每次响应后触发已收到。 ajaxComplete 也传递了 XHR 和设置对象。

【讨论】：

【解决方案2】：

您必须创建一个函数来处理您的所有请求。当所有请求都完成后，启用按钮并显示消息。

var ajaxLoading = {
        _requestsInProcess: 0,

        show: function () {
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', 'disabled');
                $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...');
            }

            this._requestsInProcess++;
        },

        hide: function () {
            this._requestsInProcess--;
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', '');
                $('#searchStatus').html('Search Complete, click on an area to view locations');
            }
        }
    };

现在，在所有 ajax 调用使用之前：

ajaxLoading.show()

在你所有的成功方法中使用：

ajaxLoading.hide()

希望这会有所帮助。

【讨论】：

这太过分了，这个功能已经内置在jQuery中，看我的回答

【解决方案3】：

是的，AJAX 请求是异步的。一种解决方案是使计数器初始化为已发送的 ajax 请求数，然后在每次响应时减少计数器。当您达到 0 时，更新您的状态并重新启用。请记住，您可能希望在超时后自动重新启用，以防网络挂起。

【讨论】：

【解决方案4】：

同意上述观点，我的建议是在超时或响应失败时减少计数器，而不是使用计时器。

然后计数器将计算已完成的响应数（失败与否）。

【讨论】：