Jquery ждет нескольких полных событий

Я хочу использовать функцию jQuery load для загрузки некоторого содержимого в div, и я хочу также вызвать функцию jQuery animate.

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

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

Я не хочу ждать завершения load до вызова animate или наоборот.

После этого я хочу вызвать третью функцию, но я не хочу ее вызывать до тех пор, пока не будет запущено полное событие для load и animate.

Как я могу это сделать?

Ответ 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!
});

Ответ 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();
});

Ответ 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 */ });

Таким образом вы можете запускать очереди друг за другом.