在多次AJAX调用后暂停执行AJAX回调

Suspend execution of AJAX callback after multiple AJAX calls

本文关键字：AJAX 暂停 执行 回调 调用      更新时间：2024-02-15

我的脚本中有两个Ajax调用，每个调用都有不同的回调，以便在调用成功时执行。

$.ajax({
    type: 'POST',
    url: "url1",
    success: foo1
});
$.ajax({
    type: 'POST',
    url: "url2",
    success: foo2
});

我有另一个函数Clear()，我想在所有ajax调用返回后激活它，但我不希望在执行Clear()之前执行回调（foo1和foo2）。

我一直在寻找答案，但没有找到明确的答案。我能做些什么来解决这个问题？有什么标志或函数可以处理这些问题吗
提前谢谢。

我不确定我是否同意这些现有的解决方案，因为JQuery为我们提供了一个用于此目的的工具：$.when

https://api.jquery.com/jquery.when/

使用$.when时，JQuery将所有promise聚合为一个promise，并且仅在所有promise都已解析时才解析。如果任何承诺被拒绝，则调用fail。

const promise1 = $.Deferred();
const promise2 = $.Deferred();
promise1.resolve({data: 'Promise 1'});
promise2.resolve({data: 'Promise 2'});
$.when.apply(this, [promise1, promise2])
  .done((promise1Data, promise2Data) => {
      // All of our promises have resolved
      // And we have all our data from each promise
      // Do the work of clear() here
      console.log(promise1Data.data)
      console.log(promise2Data.data)
  })
  .fail((error) => {         
      console.error('One or more promises failed')
  });

正如我们所看到的，在这个问题的上下文中，您可以在$.when的done内部执行任何必要的逻辑。如果你达到了这一点，你就可以保证所有的承诺都得到了解决。

上述代码块向控制台输出以下内容

> "Promise 1"
> "Promise 2"

工作示例：http://codepen.io/mikechabot/pen/MyrJYB?editors=0011

未测试，但您可以使用when尝试类似的操作。

// each object in responses contains the response text,
// status, and jqXHR object for each ajax call
function clear(responses) {
  // do something
  foo1(responses[0]);
  foo2(responses[1]);
};
$.when(ajax1, ajax2).done(clear);

您可以实现一个天真但简单的解决方案，如下所示，或者如果您需要一个更强的解决方案的话，可以看看JS Promises。

var foo1Data, foo2Data;
$.ajax({
  type: 'POST',
  url: "url1",
  success: function(data) {
    if (foo2Data) {
       Clear();
       foo1(data);
       foo2(foo2Data);
    }
    else {
      foo1Data = data;
    }
  }
});
$.ajax({
  type: 'POST',
  url: "url2",
  success: function(data) {
    if (foo1Data) {
       Clear();
       foo1(foo1Data);
       foo2(data);
    }
    else {
      foo2Data = data;
    }
  }
});
相关文章：