Я пытаюсь связать массив отложенных объектов 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>");
    });
  });
});

Я создал скрипку, чтобы проиллюстрировать проблему. У кого-нибудь есть идея?

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

0
yilik01 23 Окт 2018 в 13:48

2 ответа

Лучший ответ

Вы можете напрямую использовать отложенный элемент, созданный в 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/.

1
Gabriele Petrioli 23 Окт 2018 в 10:55

Вместо отложенного объекта jQuery вы можете напрямую работать с самим объектом 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>");
    });
  });
});
1
front_end_dev 23 Окт 2018 в 14:05
52947163