Шаблон проектирования для управления несколькими асинхронными операциями JavaScript

Я ищу хороший шаблон проектирования для отслеживания множества различные асинхронные действия JavaScript (загрузка изображений, несколько вызовов AJAX, последовательные вызовы AJAX и т. д.), что лучше, чем просто множество пользовательских обратных вызовов и пользовательских переменных состояния. Что бы вы посоветовали мне использовать? Есть ли какой-либо тип системы очередей с возможностью иметь логику, выходящую за рамки простой последовательности?

Пример проблемы

У меня есть последовательность запуска, которая включает в себя ряд асинхронных процессов (загрузка изображений, ожидание таймеров, выполнение некоторых вызовов ajax, делает некоторую инициализацию). Некоторые из асинхронных процессов могут быть запущены одновременно (загрузка изображений, вызовы AJAX), а некоторые должны быть упорядочены (запустите вызов AJAX №1, затем вызов AJAX №2). Прямо сейчас у меня все работает с функциями обратного вызова и кучей глобального состояния, которое отслеживает, что было, а что нет. Это работает, но это довольно беспорядочно, и у меня было несколько ошибок из-за сложности проверки правильности обработки всех возможностей секвенирования и условий ошибок.

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

Вот более конкретное описание:

  1. Загрузка трех изображений. Как только загружается одно конкретное изображение, я хочу его отобразить. После того, как оно отображается в течение определенного времени, я хочу отобразить второе изображение. Третий идет в очередь для последующего показа.

  2. Есть три вызова AJAX, которые должны произойти в последовательном порядке (вывод одного используется как часть ввода следующего).

  3. Когда вызовы AJAX выполнены, выполняется множество JS-обработки результатов нужно сделать, а затем нужно загрузить еще два изображения.

  4. Когда эти два изображения загружены, есть еще кое-что, что нужно сделать для отображения.

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

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

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

Изменить: я наткнулся на YUI AsyncQueue , который не является полным решением проблемы моего типа, но находится в том же пространстве. Кажется, это больше для упорядочивания или упорядочивания кучи асинхронных операций, но я не понимаю, как это помогает с тем типом принятия решений, который у меня есть.

23
задан icktoofay 3 July 2013 в 05:57
поделиться