$.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

您需要 return 每个异步函数的承诺，以便在 jQuery 时使用 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>

注意：尽管 return 它的承诺不需要最后一个。

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

$.when 问题

Issue with $.when

javascript

jquery

client

jquery-deferred