javascript jquery 等待多个完成事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7432815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery wait for multiple complete events
提问by Andy
I want to use jQuery's loadfunction to load some content into a div, and I want to also call jQuery's animatefunction.
我想使用jQuery的load函数将一些内容加载到div中，并且我还想调用jQuery的animate函数。
$('#div1').load('...', function() {
// load complete
});
$('html,body').animate({
...: ...}, ..., '...', function(){
// animate complete
});
I don't want to wait for loadto complete before calling animateor vice versa.
我不想load在调用之前等待完成，animate反之亦然。
Following this I want to call a third function, but I don't want to call it until the complete event for both the loadand the animatehave been fired.
在此之后，我想调用第三个函数，但在 theload和 the的 complete 事件animate被触发之前我不想调用它。
How can I do this?
我怎样才能做到这一点？
回答by qerub
Sounds like a job for Deferred: http://api.jquery.com/category/deferred-object/
听起来像是一份工作Deferred：http: //api.jquery.com/category/deferred-object/
var load = $.Deferred(function (dfd) {
$('#div1').load(…, dfd.resolve);
}).promise();
var animate = $('html,body').animate(…);
$.when(load, animate).then(function () {
// Do your thing here!
});
回答by BumbleB2na
var _loadComplete = false;
var _animateComplete = false;
$('#div1').load('...', function() {
// load complete
_loadComplete = true;
checkComplete();
});
$('html,body').animate({
...: ...}, ..., '...', function(){
// animate complete
_animateComplete = true;
checkComplete();
});
function checkComplete() {
if(_loadComplete && _animateComplete)
runThirdFunction();
});
回答by Joseph Silber
You'll have to keep count of how many of your events have completed, and then use that as a test in your callback:
您必须计算已完成的事件数量，然后将其用作回调中的测试：
var complete = 0;
$('#div1').load('...', function() {
complete++;
callback();
});
$('html,body').animate({
...: ...}, ..., '...', function(){
complete++;
callback();
});
function callback(){
if ( complete < 2 ) return;
// both are complete
}
回答by GolezTrol
Set a flag in LoadComplete and call your own 'allComplete' function. Set another flag in AnimateComplete and call that same 'allComplete' function.
在 LoadComplete 中设置一个标志并调用您自己的“allComplete”函数。在 AnimateComplete 中设置另一个标志并调用相同的“allComplete”函数。
In allComplete you check if both flags are set. If they are, both async functions are complete and you can call your third function.
在 allComplete 中，您检查是否设置了两个标志。如果是，则两个异步函数都已完成，您可以调用第三个函数。
Instead of setting flags (separate variables), you can also add 1 to a global counter, that way, you can increase the number of async functions to wait for without having to introduce extra flag variables.
除了设置标志（单独的变量），您还可以将 1 添加到全局计数器，这样，您可以增加要等待的异步函数的数量，而无需引入额外的标志变量。
回答by Andrew Church
Use:
利用：
$('#div1').queue(function(){ /* do stuff */ });
This way you can queue functions to execute one after the other.
通过这种方式，您可以将函数排队以一个接一个地执行。
