Двойная задержка в jQuery или JavaScript

Question

Можно ли отложить вызов функции JavaScript до тех пор, пока не будут выполнены два критерия?

У меня есть анимация slideUp() и функция .get(), которые запускаются одновременно, но либомог закончить первым.Я хочу, чтобы функция вызывалась по завершении обоих.

Answer 1

Вы просто должны отслеживать, либо счетчик, либо (мой предпочтительный подход) флаги для всей соответствующей информации.

var slideDone, getDone;

$("#foo").slideUp(function() {
    slideDone = true;
    nextThing();
});
$.get({
    // ...
    success: function() {
        getDone = true;
        nextThing();
    }
});

function nextThing() {
    if (slideDone && getDone) {
        // Do the next thing
    }
}

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

Или счетчик:

var counter = 0;

++counter;
$("#foo").slideUp(function() {
    nextThing();
});
++counter;
$.get({
    // ...
    success: function() {
        nextThing();
    }
});

function nextThing() {
    if (--counter === 0) {
        // Do the next thing
    }
}

Для кого-то, привыкшего к многопоточному программированию, это выглядит как состояние гонки (что если slideUp завершится до того, как мы запустим get?), Но это не то, что в JavaScript в браузерах, чтоявляется однопоточным (за исключением использования веб-работников , которые используют синтаксис, который в любом случае не будет применяться к вышеперечисленному).

Если вы обнаружите, что это часто встречается, вы могли быконечно, всегда изолировать логику (не то, что есть много ее, но ...) в объекте и использовать ее повторно.

Answer 2

Вы можете использовать отложенный объект jQuery: http://api.jquery.com/category/deferred-object/

Это на самом деле идеально подходит для того, что вам нужно. Вы можете настроить функцию на выполнение только тогда, когда все отложенные объекты, связанные с ней, будут разрешены. Некоторые нативные функции jQuery по умолчанию возвращают отложенный объект, такой как $ .ajax, и я считаю, что анимации также (по крайней мере, последняя версия jQuery)

Прочитайте документы, объяснение будет гораздо лучше, чем я.

Answer 3

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

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

T.J. Ответ Crowders включает в себя хороший пример кода этого подхода.