JQuery ждать нескольких завершенных событий

Question

Я хочу использовать функцию jQuery load для загрузки некоторого содержимого в div, и я также хочу вызвать функцию jQuery animate.1006 * завершить перед вызовом 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 */ });

Таким образом, вы можете ставить в очередь функции для выполнения одну за другой.