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

Question

I have 2 Ajax calls in my script, Each one of them has a different callback to execute on call success.

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

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

I have another function, Clear() , that i would like to activate once all the ajax calls returned, but I do not want that the callbacks ( foo1 and foo2 ) will be executed until I execute Clear() .

I have searched for an answer but did not found clear one. What can |I do to solve this? is there any flag or function that deals in those kind of problems?
Thanks in advance.

Answer 1

I'm not sure I agree with any of these existing solutions, as JQuery gives us a tool for just this purpose: $.when

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

When using $.when , JQuery aggregates all the promises into a single promise, and only resolves when all promises have resolved. If any promises are rejected, the fail is called.

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')
  });

As we can see, in the context of this question, you can do whatever logic is necessary inside of the done of the $.when . If you reach this point, you're guaranteed that all promises have resolved.

The above code block outputs the following to console

> "Promise 1"
> "Promise 2"

Working example: http://codepen.io/mikechabot/pen/MyrJYB?editors=0011

Answer 2

You can implement a naive but easy solution as below, or otherwise take a look at JS Promises if you need a stronger solution.

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;
    }
  }
});

Answer 3

Untested, but you could try something like this using 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);