Deferred() 仅使 2 个函数异步

Question

小提琴：https://jsfiddle.net/x89ja8r8/

我一直在寻找一种快速链接函数异步的方法。 Stackoverflow 提供了很多“相同”的解决方案，但当我尝试时，总是有问题。

在下面的示例中，我有 3 个函数。我尝试使用 $.Deffer() 异步链接它们。

预期：div 将在 5500 毫秒内更改其尺寸，然后 div 将在 2000 毫秒内淡入 0.25 不透明度，然后 div innerHTML 将更改为 DONE！

结果：div 在 5500 毫秒内改变其 innerHTML（来自 fn3()）同时 改变其尺寸（来自 fn1()），然后它在 2000 毫秒的持续时间内褪色到 0.25 的不透明度（来自 fn2()）。

function fn1() {

  $("#result").animate({
    width: 800,
    height: 800
  }, 5500);

}

function fn2() {

  $("#result").animate({
    opacity: 0.25
  }, 2000);

}

function fn3() {

  $("#result").html("DONE!");

}

var dfr = $.Deferred();

dfr.done(fn1, fn2, fn3).resolve();

这里有什么问题？如果它根本不起作用，则 fn1() 和 fn2() 之间不应该存在异步。结果清楚地表明 fn2() 确实等待 fn1() 完成，但 fn3() 甚至没有等待就开始了。

Answer 1

对于这个特定的用例，您可以使用简单的回调来代替$.Deferred：

$("#result")
.animate({ width: 800, height: 800 }, 5500)
.animate({ opacity: 0.25 }, 2000, function () {
  $(this).text('Done!')
})

div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

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

Answer 2

我一直在寻找一种快速链接函数异步的方法。

done method 没有链接任何东西。它安装处理程序以运行，如果您传递多个参数，它将同时调用这些函数。永远不要使用done。

您正在寻找的是then method 的promise，它返回一个新的promise，它将用回调的结果来解决（当它返回另一个promise 时等待）。实际上你根本不需要延迟！

function fn1() {
  return $("#result").animate({
    width: 800,
    height: 800
  }, 5500).promise();
}
function fn2() {
  return $("#result").animate({
    opacity: 0.25
  }, 2000).promise();
}
function fn3() {
  $("#result").html("DONE!");
}

fn1().then(fn2).then(fn2);

Answer 3

dfr.done(fn1, fn2, fn3) 将同时执行所有函数，而不是按顺序执行。由于 $.animate() 是一个异步操作，根据 jQuery 的文档，它可以接受一个回调，一旦动画完成就会被调用，或者你可以让它返回一个承诺。然后，您将不得不使用 $.Deferred.then() 链接承诺，如下所示：

$(document).ready(function() {
  function fn1() {
    return $("#result").animate({
      width: 800,
      height: 800
    }, 5500).promise();
  }

  function fn2() {
    return $("#result").animate({
      opacity: 0.25
    }, 2000).promise();
  }

  function fn3() {
    return $("#result").html("DONE!").delay(2000).promise();
  }

  function fn4() {
    var fn4Dfr = $.Deferred();
    setTimeout(function() {
      $("#result").html("Okay!");
      fn4Dfr.resolve();
    }, 2000);
    return fn4Dfr;
  }

  var dfr = $.Deferred();
  dfr.then(fn1).then(fn2).then(fn3).then(fn4);
  dfr.resolve();
});

fn3 使用延迟，其行为类似于 setTimeout，而 fn4 使用 setTimeout，因此我们创建了一个可以根据需要解决的承诺（并立即返回该承诺）。