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以来，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事件而不是成功（data，textStatus，XMLHttpRequest）。

根据jQuery的帮助：

complete(XMLHttpRequest, textStatus)
当一个函数被调用请求完成（成功后和执行错误回调）。该函数传递两个参数： XMLHttpRequest对象和一个字符串描述请求的状态。这是一个Ajax事件。

Answer 3

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

ajaxDoneCounter++;

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

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

3 个答案: