jquery等待多个完成事件答案

【问题标题】：jquery wait for multiple complete eventsjquery等待多个完成事件
【发布时间】：2026-01-03 01:15:02
【问题描述】：

我想使用jQuery的load函数将一些内容加载到一个div中，我还想调用jQuery的animate函数。

$('#div1').load('...', function() {
    // load complete
});

$('html,body').animate({
    ...: ...}, ..., '...', function(){
    // animate complete
});

我不想在调用animate 之前等待load 完成，反之亦然。

在此之后，我想调用第三个函数，但我不想在load 和animate 的完整事件被触发之前调用它。

我该怎么做？

【问题讨论】：

标签： javascript jquery jquery-ui events

【解决方案1】：

听起来像是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!
});

【讨论】：

.animate(…) 不返回延迟！（我认为.load 也不是......）
实际上，动画的工作方式类似于延迟：bugs.jquery.com/ticket/7934。我不确定.load 的工作原理。
哇！我不知道！有趣的是，jQuery 集合本身 变成了延迟的：jsfiddle.net/jgbUX。 真的很有趣。
@joseph-silber：我很高兴你发现了一些新东西。 :) 我检查了.load，它的返回值不是延迟的，所以我更新了我的解决方案以手动包装它。
谢谢——一个简单的例子可以在文档中值 1000 字。学习了太多新概念。伤脑筋..

【解决方案2】：

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

【讨论】：

如果您同时从.load() 和.animate() 拨打checkComplete() 绝对可行不知道吗？ ;)

【解决方案3】：

您必须计算已完成的事件数量，然后将其用作回调中的测试：

var complete = 0;

$('#div1').load('...', function() {
    complete++;
    callback();
});
$('html,body').animate({
    ...: ...}, ..., '...', function(){
    complete++;
    callback();
});

function callback(){
    if ( complete < 2 ) return;
    // both are complete
}

【讨论】：

【解决方案4】：

在 LoadComplete 中设置一个标志并调用您自己的“allComplete”函数。在 AnimateComplete 中设置另一个标志并调用相同的“allComplete”函数。

在 allComplete 中检查是否设置了两个标志。如果是，则两个异步函数都已完成，您可以调用第三个函数。

除了设置标志（单独的变量），您还可以将 1 添加到全局计数器，这样，您可以增加要等待的异步函数的数量，而无需引入额外的标志变量。

【讨论】：

【解决方案5】：

用途：

$('#div1').queue(function(){ /* do stuff */ });

这样您可以将函数排队以一个接一个地执行。

【讨论】：