Question

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

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

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

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

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

我该怎么做？

Answer 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!
});

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

Answer 3

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

var complete = 0;

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

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

Answer 4

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

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

您也可以将1添加到全局计数器，而不是设置标志（单独的变量），这样就可以增加等待的异步函数的数量，而不必引入额外的标志变量。

Answer 5

使用：

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

通过这种方式，您可以对函数进行排队，以便一个接一个地执行。

jquery等待多个完整的事件

5 个答案: