Обработка асинхронных событий с помощью jQuery

Question

У меня есть 3 асинхронных события, которые можно запускать только одно за другим.Когда первое асинхронное событие завершается, запускается второе.Когда второе событие завершено, запускается третье.Мой код такой, как показано:

asynchronousEvent1(parameters1, function () { // Do stuff
    asynchronousEvent2(parameters2, function () { // Do stuff
        asynchronousEvent3(parameters3, function () { // Do stuff
        });
    });
});

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

asynchronousEvent1(parameters1, function () { /* Do stuff */ });
whenEvent1Completed(asynchronousEvent2(parameters2, function () { /* Do stuff */ });
whenEvent2Completed(asynchronousEvent3(parameters3, function () { /* Do stuff */ });

Answer 1

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

asynchronousEvent1(parameters1).pipe(function() {
    // do stuff
    return asynchronousEvent2(parameters2);
}).pipe(function() {
    // do stuff
    return asynchronousEvent3(parameters3);
}).then(function() {
    //do stuff
});

Посмотрите на последний пример в deferred.pipe ^{[документы]} .

Answer 2

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

JMax

Answer 3

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

$('blah').animate({},1000,function(){animated = true}
if(animated){$('blahblah').animate()...}

Answer 4

Я не уверен, что полностью понимаю, что вы ищете.

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

например:.

function handleEvent1() {
   // do something
   asynchronousEvent2(parameters2, handleEvent2);
}

function handleEvent2() {
   // do something
   asynchronousEvent3(parameters3, handleEvent3);
}

asyncronousEvent1(parameters1, handleEvent1);

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