Javascript Deferred（）仅使两个函数异步

小提琴：

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

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

期望值：div将设置动画以在5500毫秒的持续时间内更改其尺寸，然后div将在2000毫秒的持续时间内褪色为0.25不透明度，然后div innerHTML将更改为完成

结果：div在5500ms的持续时间内同时更改其内部HTML（从fn3（）），同时更改其维度（从fn1（）），然后在2000ms的持续时间内（从fn2（））褪色为0.25不透明度

这里怎么了？如果它根本不起作用，fn1（）和fn2（）之间就不应该存在异步。结果清楚地表明，fn2（）确实在等待fn1（）完成，但fn3（）只是在不等待的情况下启动。

dfr.done（fn1、fn2、fn3）将同时执行所有函数，而不是按顺序执行。由于$.animate（）是一个异步操作，根据jQuery的文档，它可以接受一个回调，该回调将在动画完成后调用，也可以让它返回一个承诺。然后，您必须使用$.Deferred.then（）链接承诺，如下所示：

$（文档）.ready（函数（）{
函数fn1（）{
返回$（“#结果”）。设置动画({
宽度：800，
身高：800
}，5500）允诺；
}
函数fn2（）{
返回$（“#结果”）。设置动画({
不透明度：0.25
}承诺（）；
}
函数fn3（）{
return$（“#result”）.html（“DONE！”）.delay（2000.promise（）；
}
函数fn4（）{
var fn4Dfr=$.Deferred（）；
setTimeout（函数（）{
$（“#结果”）.html（“好的！”）；
fn4Dfr.resolve（）；
}, 2000);
返回fn4Dfr；
}
var dfr=$.Deferred（）；
然后（fn1）。然后（fn2）。然后（fn3）。然后（fn4）；
dfr.resolve（）；
});对于这个特定的用例，您可以使用一个简单的回调来代替
$。Deferred
：


$（“结果”）
.animate（{宽度：800，高度：800}，5500）
.animate（{opacity:0.25}，2000，函数（）{
$（this）.text（'Done！'）
})
div{
宽度：100px；
高度：100px；
背景色：#ccc；
}

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

这条链子什么都没有。它安装要运行的处理程序，如果您传递多个参数，它将同时调用函数<不应使用代码>完成

您正在寻找的是承诺的类型，它返回一个新的承诺，该承诺将与回调的结果一起解析（等待它返回另一个承诺）。实际上你根本不需要尊重

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

---

这两个按顺序运行的函数之所以这样做，是因为

.animate（）

具有一种特殊的行为，即在启动.Hi之前等待该元素上的所有其他动画完成。谢谢你的建议。但是，我需要Deferred（），因为我需要链接函数（）（纯javascript），这些函数本身可能不是异步函数。如果您有4个函数，您将如何以异步顺序执行它们？您好。我在这里试过了，但没有达到预期效果。嗨，gyre。那把小提琴在fn3（）上没有2秒钟的等待时间。目标是执行fn1（）5.5秒，然后执行fn2（）2秒，然后等待2秒执行fn3（），然后等待2秒执行fn4（）。这个想法是正确的，gyre。然而，fn4并不等待fn3完成！他们两个同时发射，fn3和fn4之间没有等待。哦，我忘了将

fn4

的延迟更改为4s。给你：嗨，鲍。谢谢你的回复。既然我知道$.animate（）本身是异步的，那么如果我有另一个不是异步函数的fn4（）会怎么样？那么我该如何链接它们呢？因为我在这里尝试了，但没有达到预期效果。对于fn4，如果您决定执行一些没有承诺的事情，那么您可以创建一个，并在完成时解决。那么，给定一个纯javascript函数fn（）{/*代码在这里*/}，有没有办法让这个函数成为jQuery的承诺？我刚刚更新了我的答案，以fn4为例。很好，bao。请你把那把小提琴更新一下作为你的答案好吗。这正是我要找的。

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