等到所有jQuery Ajax请求都完成了？

Question

如何使函数等到所有jQuery Ajax请求在另一个函数内完成？简而言之，我需要等待所有Ajax请求在执行下一个之前完成。但是怎么样？等到所有jQuery Ajax请求都完成了？

Answer 1

如果您想等到文档中的所有ajax请求都完成，无论它们有多少，只需以$.ajaxStop这种方式使用事件：

  $(document).ajaxStop(function () {
      // 0 === $.active
  });

在这种情况下，无需猜测将来可能完成的应用程序中有多少请求。在某些情况下，ajax请求可以是函数内部逻辑的一部分，这可能非常复杂（例如调用其他函数），在这种情况下，您可能不会等到所述函数完成其整个逻辑而不是仅等待ajax部分完成。

$.ajaxStop这里也可以绑定到HTML您认为可能被修改的任何节点ajax。

同样，此处理程序的目的是知道何时没有活动 ajax不清除或重置某些内容。

PS如果您不介意使用ES6语法，则可以使用Promise.all已知ajax方法。例：

Promise.all([ajax1(), ajax2()]).then(() => {
 // all requests finished successfully}).catch(() => {
 // all requests finished but one or more failed})

这里有一个有趣的一点是，它的作品都与Promises和$.ajax请求。

Answer 2

jQuery ajaxQueue

//This handles the queues    (function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };})(jQuery);

然后你可以像这样在队列中添加一个ajax请求：

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });