只有在多个 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() 可能永远不会被调用。我可以在任何$.ajax 中使用error 回调来解决这个问题，所以我不会太担心。

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

Answer 1

更新： 从 jQuery 1.5 开始，deferred objects ^[docs] 提供了更简洁的解决方案。 Have a look at an example here.

---

我会使用.ajaxComplete()，只要 Ajax 调用完成（成功或错误）就会触发它：

var numOfAjaxRequests = 5;

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

    }
});

那么您不必编辑每个 Ajax 请求。

您甚至可以使用.ajaxSend() 来获得启动 Ajax 请求的通知，而不是对其进行硬编码（但我不确定这是否真的有效，也许您会遇到竞争条件）：

var numOfAjaxRequests = 0;

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

Answer 2

我认为你应该使用complete(XMLHttpRequest, textStatus) ajax 事件而不是成功（数据、文本状态、XMLHttpRequest）。

根据jQuery帮助：

complete(XMLHttpRequest, textStatus)

当 请求完成（成功后 错误回调被执行）。这 函数获得两个参数： XMLHttpRequest 对象和一个字符串 描述请求的状态。 这是一个 Ajax 事件。

Answer 3

我对 JavaScript 内部了解不够，但是操作存在危险：

ajaxDoneCounter++;

不是原子的。如果是这种情况，那么这可能会受到竞争条件的影响。