javascript - 等待异步事件处理程序的设计模式

Question

在我的应用程序中，有些地方的对象应该发出事件，并且应该延迟执行，直到所有事件处理程序完成工作。 事件处理程序可能正在执行异步操作(例如写入数据库)。

Application.on("login", function(evt) {
    // Asynchronous operation (e.g. update info in database)
});

Application.trigger("login").then(function() {
    // Execute stuff after all (async) event handlers are done
});

我环顾四周，没有找到任何既定的设计模式。我已经有了一个令我满意的实现，但我很好奇是否有人以不同的方式解决了这个问题？

Answer 1

我的解决方案是向 evt 参数添加一个 promises[] 属性。异步事件回调只需向该数组添加一个 Promise，triggerAsync 函数就会返回一个等待所有 Promise 解决的 Promise。

http://jsfiddle.net/nonplus/9aCC4/

triggerAsync 方法的实现(使用 Backbone 事件和 jQuery Promise，但也应该适用于其他堆栈):

// Trigger an event and return promise that waits on
// event handler promises
function triggerAsync(emitter, name, evt) {
    evt || (evt={});
    evt.promises = [];
    emitter.trigger(name, evt);
    return $.when.apply(null, evt.promises);
}

triggerAsync 的用法:

triggerAsync(obj, "myEvent").then(function() {
    // Code executed after event handlers are done
});

异步事件处理程序的实现:

// Async handler doing an ajax request
obj.on("myEvent", function (evt) {
    evt.promises.push($.ajax(...));
});

// Async handler doing generic async operation
obj.on("myEvent", function (evt) {
    var dfd = $.Deferred();
    evt.promises.push(dfd.promise());

    // Async operation
    // Eventually calls dfd.resolve() or dfd.reject()
});