jquery等待多个完整的事件
我想使用jQuery的load函数将一些内容加载到div中，我还想调用jQuery的animate函数。
$('#div1').load('...', function() { // load complete }); $('html,body').animate({ ...: ...}, ..., '...', function(){ // animate complete });
我不想在调用animate之前等待load完成，反之亦然。
接下来我想调用第三个函数，但我不想在load和animate的完整事件被触发之前调用它。
我怎样才能做到这一点？
听起来像是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! });
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(); });
您必须记录已完成的事件数量，然后将其用作回调中的测试：
var complete = 0; $('#div1').load('...', function() { complete++; callback(); }); $('html,body').animate({ ...: ...}, ..., '...', function(){ complete++; callback(); }); function callback(){ if ( complete < 2 ) return; // both are complete }
在LoadComplete中设置一个标志并调用您自己的’allComplete’函数。 在AnimateComplete中设置另一个标志并调用相同的’allComplete’函数。
在allComplete中，检查是否设置了两个标志。 如果是，则两个异步function都已完成，您可以调用第三个function。
您也可以将1添加到全局计数器，而不是设置标志（单独的变量），这样，您可以增加等待的异步函数的数量，而无需引入额外的标志变量。
使用：
$('#div1').queue(function(){ /* do stuff */ });
这样，您可以将函数排队以一个接一个地执行。