$ .when问题

Question

我只想在t1和t2完成后才执行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); };

我正在输出：-
t2
t1
t
但我期待的是：
t
t1
t2

为什么 then 部分在t1和t2之前执行。

Answer 1

您需要从每个异步函数返回promise，然后才能使用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>

注意：尽管最后一个不需要从中返回承诺。

Answer 2

您需要更改t函数才能按预期工作。当我们使用异步操作（如setTimeout）时，我们需要使用deferred object。

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); };