javascript - [javascript, jQuery]如何在没有回调的情况下继续另一个动画之前等待动画完全完成

Question

http://jsfiddle.net/jmztZ/

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

问题:我怎么能等到第一个函数(也就是 fiddle 中的“go()”)完全执行(包括更改内容 .html() 和所有动画)，然后再触发第二个函数(也就是“went”) ).

尝试:

注意:尽管我的这些尝试似乎是在队列中分别执行动画，但 html() 函数永远不会等待。再看看 fiddle 。此外，我已经尝试了在 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();
})();

但它们似乎都无法正常工作。

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

Answer 1

试试这个。

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

这是 fiddle :http://jsfiddle.net/jmztZ/31/