将 jQuery 的列表链接在一起时出现问题

Question

我正在尝试将 jQuery 个延迟对象的数组链接在一起，目的是在所有问题都解决后调用最终函数。

但是，我无法让 $.when.apply($, deferreds) 工作，而且我不明白为什么它不工作。

function callBackend(count) {
  var deferred = $.Deferred();
  setTimeout(function() {
    $("div").append("<p>" + count + "</p>");
    deferred.resolve();
  }, 50);
  return deferred.promise();
}

$(function() {
  $("a").click(function() {
    var promises = [];
    for (i = 1; i <= 10; i++) {
      var deferred = $.Deferred();
      callBackend(i).then(function() {
        deferred.resolve();
      });
      promises.push(deferred.promise());
    }
    $.when.apply($, promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});

我创建了一个fiddle来说明这个问题。有人有想法吗？

http://jsfiddle.net/YNGcm/2244/

Answer 1

您可以直接使用在 callBackend 中创建的延迟元素。

function callBackend(count) {
  var deferred = $.Deferred();
  setTimeout(function() {
    $("div").append("<p>" + count + "</p>");
    deferred.resolve();
  }, 500);
  return deferred;
}

$(function() {
  $("a").click(function() {
    var promises = [];
    for (i = 1; i <= 10; i++) {
      var deferred = callBackend(i)
      promises.push(deferred);
    }
    $.when.apply($, promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});

见http://jsfiddle.net/gaby/YNGcm/2243/

Answer 2

您可以直接处理 Promise 对象本身，而不是 jQuery 的 Deferred 对象。

function callBackend(count) {

 return new Promise((resolve,reject) => {
         (function(c){
                 setTimeout(function() {
        $("div").append("<p>" + count + "</p>");
    resolve(c);
  }, 5000);
     })(count);
 });
}

$(function() {

  $("a").click(function() {
    var promises = [];
    for (i = 1; i <= 10; i++) {
      promises.push(callBackend(i));
    }

    Promise.all(promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});

将 jQuery 的列表链接在一起时出现问题

Problem chaining a list of jQuery Deferred together

jquery

deferred