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

2019年8月4日 198次阅读

http://jsfiddle.net/jmztZ/

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

问题：我怎么能等到第一个函数(小提琴中的“go()”)完全执行(包括更改内容.html()和所有动画)才能触发第二个函数(又名“go”).

尝试：

注意：即使我的那些尝试似乎分别在队列上执行动画,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();
})();

但它们似乎都没有正常工作.

所以为了最终确定,我会有一个数组,可以使用.push()来推送任意数量的函数来执行,这些函数都是关于操纵div的内容并为其设置动画.我想知道从该Array中正确执行所有函数的方法,一个接一个,下一个必须等​​到当前的一个完成.

最佳答案 试试这个.

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

这是小提琴：http://jsfiddle.net/jmztZ/31/

点赞