Question

我正在寻找一种方法完成后监控的最佳标准javascript方式。

我有一个用于ajax调用的方法，如下所示：

function rdRelatedJobs(param1,param2,param3) {
    var completeURL = param1 + param2 + param3;

    $.ajax({
        type: "GET",
        url:completeURL,
        dataType: "xml",
        success: function(xml){
            // We parse the XML here
                };
    },
        error: function() {
            console.log("An error occurred while processing XML file.");
        }
    });
} // end function rdRelatedJobs

此函数被调用两次，彼此紧接排队。我需要知道的是一旦第二次调用此方法完成后如何调用另一个方法。

请注意，在这种情况下，ajax请求是成功还是失败并不重要。我只需要知道在上面的方法运行两次后如何调用该方法。

Answer 1

这是一个特定于jQuery的答案，以及一般答案。

特定于jQuery的答案是返回ajax调用的结果，该调用是jqXHR对象：

function rdRelatedJobs(param1,param2,param3) {
    var completeURL = param1 + param2 + param3;

    return $.ajax({
        type: "GET",
        url:completeURL,
        dataType: "xml",
        success: function(xml){
            // We parse the XML here
        },
        error: function() {
            console.log("An error occurred while processing XML file.");
        }
    });

} // end function rdRelatedJobs

...当您拨打rdRelatedJobs时，请使用$.when：

$.when(
    rdRelatedJobs(/*...args for first call...*/),
    rdRelatedJobs(/*...args for second call...*/)
).then(function() {
    // both are done now
});

这是有效的，因为jqXHR个对象实现了jQuery Promise API，$.when会在您提供的所有承诺都已完成时调用您的回调。

通用答案是使用做类似事情的promise库。

或者另一个通用答案是rdRelatedJobs在完成后调用回调，并维护一个计数器：

function rdRelatedJobs(param1,param2,param3,done) {
    var completeURL = param1 + param2 + param3;

    return $.ajax({
        type: "GET",
        url:completeURL,
        dataType: "xml",
        success: function(xml){
            // We parse the XML here
            done(xml);
        },
        error: function() {
            console.log("An error occurred while processing XML file.");
            done(null);
        }
    });
} // end function rdRelatedJobs

......然后：

var counter = 0;
function done(result) {
    if (--counter === 0) {
        // Both are done
    }
}
rdRelatedJobs(/*...args for first call...*/, done);
++counter;
rdRelatedJobs(/*...args for second call...*/, done);
++counter;

这看起来像竞争条件，但它不是，因为浏览器中只有一个主要的UI JavaScript线程。

Answer 2

outside the function you can have a `var counter`

然后在里面：

$.ajax({
        type: "GET",
        url:completeURL,
        dataType: "xml",
        success: function(xml){
            // We parse the XML here
            counter++;
            if(counter==2) bla bla 
        };
    },
        error: function() {
            console.log("An error occurred while processing XML file.");
            counter++;
            if(counter==2) bla bla
        }
    });

Answer 3

function rdRelatedJobs(param1,param2,param3) {
  var completeURL = param1 + param2 + param3;

  // return an ajax promise from this function
  return $.ajax({
    type: "GET",
    url:completeURL,
    dataType: "xml",
    success: function (xml) {
      // We parse the XML here
    },
    error: function () {
      console.log("An error occurred while processing XML file.");
    }
  });
}

// compile the promises by passing them into an array
function getPromises() {
  var promises = [];
  promises.push(rdRelatedJobs(1, 2, 3));
  promises.push(rdRelatedJobs(3, 4, 5));
  return promises;
}

// use $.when by passing in the promise array using the apply method
$.when.apply(null, getPromises()).then(function () {
  // do a thing
});

Answer 4

您可以使用名为Q的库并执行全部＆＃39;并使用＆＃39;然后＆＃39;成功与失败的回调

https://github.com/kriskowal/q

e.g：

Q.all([rdRelatedJobs(x,y,z), rdRelatedJobs(a,b,c)]).then(function () {
    console.log("Data saved!");
});

非常类似于jquery $。当＆＃39;然后＆＃39;只有在两个ajax请求完成后才会被调用。您必须更改rdRelatedJobs以在$ .ajax之前执行返回，以便从函数返回promise。

在完成其他两种方法之后调用方法

4 个答案: