等到带有动画的功能结束后再运行另一个功能
我遇到了一个正常（ 非Ajax ）函数的问题，这些函数在每个函数中涉及大量动画 。 目前我只是在函数之间有一个setTimeout ，但这并不完美，因为没有浏览器/计算机是相同的。
附加说明：它们都有独立的动画/等相互冲突。
我不能简单地把一个放在另一个的回调函数中
// multiple dom animations / etc
FunctionOne();
// What I -was- doing to wait till running the next function filled
// with animations, etc
setTimeout(function () {
FunctionTwo(); // other dom animations (some triggering on previous ones)
}, 1000);
无论如何，在js / jQuery中有：
// Pseudo-code
-do FunctionOne()
-when finished :: run -> FunctionTwo()
我知道$.when() ＆ $.done() ，但这些是为AJAX ...
jQuery有一个暴露的变量（出于某种原因，并未在jQuery文档中的任何地方列出），名为$ .timers，其中包含当前正在发生的动画数组。
function animationsTest (callback) {
// Test if ANY/ALL page animations are currently active
var testAnimationInterval = setInterval(function () {
if (! $.timers.length) { // any page animations finished
clearInterval(testAnimationInterval);
callback();
}
}, 25);
};
基本用途：
// run some function with animations etc
functionWithAnimations();
animationsTest(function () { // <-- this will run once all the above animations are finished
// your callback (things to do after all animations are done)
runNextAnimations();
});
你可以使用jQuery的$.Deferred
var FunctionOne = function () {
// create a deferred object
var r = $.Deferred();
// do whatever you want (e.g. ajax/animations other asyc tasks)
setTimeout(function () {
// and call `resolve` on the deferred object, once you're done
r.resolve();
}, 2500);
// return the deferred object
return r;
};
// define FunctionTwo as needed
var FunctionTwo = function () {
console.log('FunctionTwo');
};
// call FunctionOne and use the `done` method
// with `FunctionTwo` as it's parameter
FunctionOne().done(FunctionTwo);
你也可以将多个延期打包在一起：
var FunctionOne = function () {
var
a = $.Deferred(),
b = $.Deferred();
// some fake asyc task
setTimeout(function () {
console.log('a done');
a.resolve();
}, Math.random() * 4000);
// some other fake asyc task
setTimeout(function () {
console.log('b done');
b.resolve();
}, Math.random() * 4000);
return $.Deferred(function (def) {
$.when(a, b).done(function () {
def.resolve();
});
});
};
http://jsfiddle.net/p22dK/
将以下内容添加到第一个函数的末尾
return $.Deferred().resolve();
像这样调用两个函数
functionOne().done(functionTwo);
除了Yoshi的回答，我还发现了另一个非常简单的（回调类型）动画解决方案。
jQuery有一个暴露的变量（出于某种原因，并未在jQuery文档中的任何地方列出），名为$ .timers ，其中包含当前正在发生的动画数组。
function animationsTest (callback) {
// Test if ANY/ALL page animations are currently active
var testAnimationInterval = setInterval(function () {
if (! $.timers.length) { // any page animations finished
clearInterval(testAnimationInterval);
callback();
}
}, 25);
};
基本用途：
functionOne(); // one with animations
animationsTest(functionTwo);
希望这可以帮助一些人！
链接地址: http://www.djcxy.com/p/83713.html上一篇: Wait till a Function with animations is finished until running another Function