仅在完成多个AJAX请求后才触发函数

Question

我有一个特定的函数,我想运行一次,并且只有在完成几个AJAX请求之后.

我目前的解决方案看起来有点像这样:

function doWork() {
    //This is the function to be run once after all the requests
}

//some tracking/counting variables
var ajaxDoneCounter = 0;
var numOfAjaxRequests = 5;
var workDone = false;

function doWorkTrigger() {
    ajaxDoneCounter++;
    if( !workDone && ajaxDoneCounter >= numOfAjaxRequests ) {
        workDone = true;
        doWork();
    }
}

// ...

//and a number of ajax requests (some hidden within functions, etc)
//they look something like this:
$.ajax({
    url: "http://www.example.com",
    dataType: "json",
    success: function( data ) {
        //load data in to variables, etc
        doWorkTrigger();
    }
});

上面的一个明显缺陷是,任何不成功的AJAX调用都不会增加ajaxDoneCount,因此doWork()可能永远不会被调用.我可以使用error内部任何回调来解决这个问题$.ajax,所以这并不会让我太担心.

我想知道的是上述是否安全和/或良好做法？
有没有我错过的技巧,或者其他可能更好的东西？

Answer 1

更新:自jQuery 1.5以来,延迟对象 ^[docs]提供了更清晰的解决方案.看看这里的一个例子.

我会使用.ajaxComplete(),只要Ajax调用完成(成功或错误),它就会被触发:

var numOfAjaxRequests = 5;

$(document).ajaxComplete(function() {
    numOfAjaxRequests--;
    if(!numOfAjaxRequests) {
        doWork();

    }
});

然后您不必编辑每个Ajax请求.

你甚至可以.ajaxSend()用来获得启动Ajax请求的通知,而不是硬编码(但我不确定这是否真的有效,也许你会遇到竞争条件):

var numOfAjaxRequests = 0;

$(document).ajaxSend(function() {
    numOfAjaxRequests++;
});