Question

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

但是，我无法使$ .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>");
    });
  });
});

我创建了一个小提琴来说明问题。有人知道吗？

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

代替jQuery的Deferred对象，您可以直接处理Promise对象本身。

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 Deferred列表

2 个答案: