Проблема с $ .when

Question

Я хочу выполнить функцию t2 только после завершения t1 и t2

var t = function () {
   setTimeout(function () {
     console.log("t");
   }, 5500);
};

var t1 = function () {
   setTimeout(function () {
     console.log("t1");
   }, 500);
};

var t2 = function () {
   setTimeout(function () {
    console.log("t2");
   }, 100);
};

var r = function () { $.when(t(), t1()).then(t2); };

Я получаю вывод: -t2t1TНо я ожидал:Tt1t2

Почему , а затем часть выполняется до t1 и t2.

Answer 1

Вам нужно изменить функции t, чтобы они работали должным образом. Когда мы работаем с асинхронными операциями, такими как setTimeout, нам нужно использовать отложенный объект .

var t = function () {
  var dfd = $.Deferred();

  setTimeout(function () {
    console.log("t");
    dfd.resolve('t');
  }, 5500);

  return dfd.promise();
};

var t1 = function () {
  var dfd = $.Deferred();

  setTimeout(function () {
    console.log("t1");
    dfd.resolve('t1');
  }, 500);

  return dfd.promise();
};

var t2 = function () {
  var dfd = $.Deferred();

  setTimeout(function () {
    console.log("t2");
    dfd.resolve('t2');
  }, 100);

  return dfd.promise();
};

var r = function () { $.when(t(), t1()).then(t2); };

Answer 2

Вам нужно будет вернуть обещание от каждой асинхронной функции, чтобы использовать jQuery, когда и тогда:

var t = function () {
   var d = new $.Deferred();
   setTimeout(function () {
     console.log("t");
     d.resolve()
   }, 500);
   return d.promise();
};

var t1 = function () {
   var d = new $.Deferred();
   setTimeout(function () {
     console.log("t1");
     d.resolve()
   }, 300);
   return d.promise();
};

var t2 = function () {
   var d = new $.Deferred();
   setTimeout(function () {
    console.log("t2");
    d.resolve()
   }, 100);
   return d.promise();
};

var r = function () { $.when(t()).then(t1).then(t2)};
r()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Примечание: последний не требуется для возврата обещания.