[javascript，jQuery]如何等待动画完全完成，然后在没有回调的情况下继续另一个动画

以上是我的问题的链接。假设我只有1个div，其内容可能会通过.html（）更改。我想使用div来更改其内容，并使用animate（）或show（）等来显示自己。但是，当有两个函数操作div时，浏览器的速度太快，似乎跳过了第一个.html（）函数

问：在启动第二个函数（又名“go”）之前，我怎么能等到第一个函数（又名“go（）”）完全执行（包括更改contents.html（）和所有动画）

尝试：

注意：即使我的这些尝试似乎分别在队列上执行动画，html（）函数也不能等待。再看看小提琴。此外，我尝试了Stackoverflow上的几种方法，结果都一样

我试过使用：

//Regular way, obviously didn't work
go(); went();

以及使用延期付款：

$.Deferred().done(go, went).resolve();

还有自称函数：

var f = [go, went]; c = 0;
(function selfCall(){
    if (c >= f.length) return;
    f[c].call(); c++;
    selfCall();
})();

function pipePromise(pipequeue){
  pipe(unit(),pipequeue);
}
// then your call can be quite neat now  
pipePromise(pipequeue);

但它们似乎都不能正常工作

---

最后，我将有一个数组，它可以使用.push（）来推入任意数量的函数来执行，这些函数都是关于操作div的内容并为其设置动画的。我想知道如何正确执行该数组中的所有函数，一个接一个，下一个函数必须等到当前函数完成。

没有回调就无法完成，但这里有一个工作要做。调用函数时，发送

selfCall

作为参数：

f[c].call(null, selfCall); c++; //null = this in function, but you don't use this.

然后，在go函数中，执行以下操作：

function go(callback) {
    $("#foo").html("GO");
    $("#foo").show("drop", 750).hide("explode", 500, callback);
}

小提琴：试试这个

function go() {
    $("#foo").html("GO");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function going() {
    $("#foo").html("going");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function gone() {
    $("#foo").html("gone");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
function went() {
    $("#foo").html("WENT");
    return $("#foo").show("drop", 750).hide("explode", 500).promise();
}
var arr = [go, going, gone, went],
    thisItem;

//randomize array
arr = arr.sort((function() { return 0.5 - Math.random();}));

function getNextArrayFn() {
    thisItem = arr.shift();
    thisItem().done(getNextArrayFn);
};
getNextArrayFn();

---

这是小提琴：

我想你可以试试一种叫做单子的技巧——但是什么是单子呢？我不能很好地解释它

所以，“请告诉我代码！”

我们在数组

pipequeue

中有一些异步函数，

pipequeue

中的每个函数都必须是一个

延迟的

实例。该函数可以是异步的。他们将一个接一个地被处决

这样：

drop

explode

drop2

explode2

是四个异步动画过程，每个过程返回一个jQuery

promise

完整的代码位于jsbin：

您可以

推送

或

弹出

管道队列

。

管道队列中的每个fn都没有耦合

但是如果你认为
管道（unit（），pipequeue）
有点

您可以将
unit（）
调用包装到函数中：

var f = [go, went]; c = 0;
(function selfCall(){
    if (c >= f.length) return;
    f[c].call(); c++;
    selfCall();
})();

function pipePromise(pipequeue){
  pipe(unit(),pipequeue);
}
// then your call can be quite neat now  
pipePromise(pipequeue);

我喜欢，但还有另一个选择。在回调中写入html到
。隐藏（0，回调）
：


您甚至可以这样按顺序调用它们：

没有回调，您无法完成此操作。这就是所有事情的运作方式。@Pointy:那么有没有办法解决我的问题呢？比如，无论如何，把函数数组推到回调中并强制它工作？我尝试了$.Callbacks（），但它似乎不正确。有很多方法可以做到这一点，但它总是涉及到管理回调。您可以使用一个回调函数从数组中提取“工作列表”项（这基本上就是jQuery对动画队列所做的）。请你在回答部分根据我的问题贴一个例子好吗？是的，我可以贴一个例子，但给我一点时间；目前我还有其他义务：）从技术上讲，这是使用回调，我不喜欢。谢谢你的帮助。只是出于好奇，你为什么不想使用回调？我不能使用回调的原因是因为我还不知道哪些函数将被执行，以什么顺序等。它们是一个随机函数的整体，被推到一个数组中。因此，我非常感谢您的工作方法，但它似乎不适用于我。不，它还不适用，因为我无法判断go（）之后的函数是否将被go（）。它们都被随机推送到数组中。因此，如果数组是[go，Goe，Goe，gone]，那么go（）.done（gone）不能很好地工作。最后更新了一次。