解决承诺和处理浏览器事件的时机

Question

考虑以下用 ES6 编写的代码：

function waitForMessage() {
    return new Promise((resolve, reject) => {
        function handler(event) {
            resolve(event);
            window.removeEventListener('message', handler);
        };
        window.addEventListener('message', handler); 
    });
}

function loop(event) {
    // do something (synchronous) with event
    waitForMessage().then(loop);
}
waitForMessage().then(loop);

在这段代码中，waitForMessage 安装了一个事件处理程序，等待消息到达当前窗口。一旦它到达，waitForMessage 返回的 Promise 将被解析并移除事件处理程序。

在loop 中，只要通过解决前一个承诺而排队的作业正在运行，waitForMessage 就会生成一个新的承诺。

现在我的问题是 loop 是否可能由于时间问题而无法在窗口中发布所有消息：如果 Promise.prototype.resolve 排队的作业并不总是在浏览器事件循环中排队的任何任务之前运行，它可能假设message 事件在window 开始调度，而当前没有处理程序正在侦听此事件。

标准对这些不同类型的作业/任务的时间安排有何规定，即解决 Promise 的回调和来自 ES6 世界之外的事件分派？

（我只是以message事件为例，我对其他事件同样感兴趣，比如click或popstate事件。）

P.S.：由于在下面的 cmets 中已经多次询问过这个问题，让我用上面的代码描述一下我所希望的：

我想使用 ES6 特性来避免在我的代码中过多地处理回调，并确保及时删除添加的事件侦听器以避免内存泄漏。因此，我按照这些思路写了一些东西：

const looper = (element, type, generator) => (... args) => new Promise((resolve, reject) => {
    const iterator = generator(...args);
    const listener = (event) => {
        try {
            let {done, value} = iterator.next(event);
        } catch (error) {
            reject(error);
            element.removeEventListener(type, listener);
        }
        if (done) {
            resolve(value);
            element.removeEventListener(type, listener);
        }  
    }
    element.addEventListener(type, listener);
    listener();
});

const loop = (element, type, generator) => looper(element, type, generator)();

使用此代码，我可以执行以下操作：

loop(window, 'message', function *() {
    event = yield;
    // do something synchronous with event
    if (shouldStopHere) {
        return result;
    }
});

此代码不受我的问题所涉及的问题的影响；只创建一个promise，并且事件处理程序只附加和删除一次。当内部函数返回时，事件处理程序的删除是有保证的。

众所周知，ES6 中的生成器也可以用于处理 Promise（就像 Python 3.4 中的 asyncio 包一样）。有人提议 ES7 为这些异步函数包含一些糖，即https://github.com/lukehoban/ecmascript-asyncawait。我希望使用这种糖（目前由 Traceur 支持）来糖化我上面的 loop 函数。然而，提议的异步函数只处理承诺，所以我尝试以一种产生承诺结果的方式重写我的循环代码，我在问题的开头发布了这个结果。

Answer 1

解决您的具体问题

在 ES6 Promise 和实现构造函数规范的 Promise 实现中，Promise 构造函数的行为都得到了很好的定义（几乎除了旧的 jQuery 之外的所有东西）：

var p = new Promise(function(resolve, reject){
     // ALWAYS runs synchronously
     console.log("Hello"); 
}); 
console.log("World"); // program always logs "Hello World", events will never be missed

这是精心设计的。您所描述的用例主要是保证此行为在规范中有效的原因。

请注意，虽然 promise 构造函数被指定为同步运行，但您仍然会遇到 then - http://jsfiddle.net/vko4p6zz/

的竞争条件

我不认为 promise 在这里是正确的抽象（参见 jfriend00 的回答），但它可能在更多上下文中有意义 - 您可以依赖 promise 构造函数的执行顺序。你可以看到这个in the specification - new Promise 然后调用InitializePromise 进而同步调用传递的函数。

一种可能更好的方法。

就像 Promise 表示单个值 + 时间一样，有一个称为 observable 的抽象表示多个值 + 时间。就像 promise 是一个函数式回调一样，observable 是一个函数式事件发射器。这是一个使用一个库 (RxJS) 的示例 - 还有几个其他库实现了这个概念：

var messageStream = Rx.Observable.fromEvent(window, 'message');
messageStream.subscribe(function(value){
   console.log(value); // unwrapping the event
});

除了使用 subscribe 解包 - 您还可以 map 事件、过滤它们、flatMap 它们等等 - 它们就像 Promise 一样组成，并且我认为在这种情况下你可以/应该接近 Promise .

Answer 2

您当前的方法充其量是依赖于 Promise .then() 处理程序的精确且一致的实现，这样它们在调用之前绝不允许处理其他排队的事件。

在最坏的情况下，您肯定有机会错过活动。

如果你查看Benjamin's jsFiddle 并在 Chrome 和 Firefox 中运行它，你会看到 Firefox 错过了一个事件（我在 Chrome 中没有看到一个丢失的事件）。

很明显，您当前的设计根本不是一个安全的设计，因为它依赖于您的代码根本没有的实现细节（可能会或可能不会很好地指定，即使指定也可能会或可能不会完美地实现）需要依赖。无论某些规范是否表明这可能或应该工作，这是一个脆弱的设计，不需要容易受到这个问题的影响。

更有意义的是将您的设计基于不断安装的事件侦听器，这样您就不会错过任何事件。可能仍然可以在这种类型的设计中使用 Promise，但是正如其他人指出的那样，这很少（如果有的话）是首选的设计模式，因为 Promise 不是为重复事件设计的，所以你必须在每次之后继续创建新的 Promise事件，您通常会发现仅对事件处理程序使用经典回调是一种更简洁的处理方式，并且不会承担您当前方法所承担的风险。

例如，您建议的代码可以简单地替换为：

window.addEventListener('message', function(e) {
    // the synchronous code you mentioned to process the event
}); 

这更简单，并且保证不会对您的代码可能存在的丢失消息有任何漏洞。此代码也更符合事件驱动代码的一般设计模式，这些代码通常用于各种事件（例如您提到的点击事件）。

Answer 3

标准对这些不同类型的作业/任务的时间安排有何规定，即解决 Promise 的回调和来自 ES6 世界之外的事件分派？

• Promises 在微任务队列中运行。
• UI 事件在宏任务队列中运行。

HTML5 规范要求 micro task queue 在宏任务队列开始下一个任务之前完全耗尽。

DOM spec 目前是undergoing changes，因为他们想改进观察者与承诺交错的方式，但他们将保留在微任务队列中。