javascript - JavaScript 中的异步事件处理

Question

我在防止代码中的双重(多重)eventListener 处理时遇到问题:

var locked;

button.addEventListener("click", function() {
    if (locked) return;
    locked = true;
    calculateSomethingHeavy();
    locked = false;
}

尽管 locked == true，但第二次立即单击按钮会触发另一个事件。 button.disabled = true 或 setTimeout(function() {locked = true;}, 0) 之类的东西没有效果，因为(我猜)第二次调用是堆叠的并且会只有在 first 被完全处理后才会被调用。我想我缺少一些异步事件处理的完整技术。如何在纯 js 中执行此操作？

Answer 1

此处的正确答案取决于 calculateSomethingHeavy 的定义。根据问题标题推测它是异步的，但这可以使用回调、事件、 promise 或异步/等待来实现。

无论这里使用的是哪一个，您需要做的是确保 locked 在 calculateSomethingHeavy 之前未设置为 false > 已经完成。在每种情况下，这可能看起来像以下...

回调

var locked;

button.addEventListener("click", function() {
    if (locked) return;
    locked = true;
    calculateSomethingHeavy(() => {
        locked = false;
    });
});

事件

var locked;

button.addEventListener("click", function() {
    if (locked) return;
    locked = true;
    calculateSomethingHeavy().on('finish', () => {
        locked = false;
    });
});

promise

var locked;

button.addEventListener("click", function() {
    if (locked) return;
    locked = true;
    calculateSomethingHeavy()
        .then(() => {
            locked = false;
        });
});

异步/等待

var locked;

button.addEventListener("click", async function() {
    if (locked) return;
    locked = true;
    await calculateSomethingHeavy();
    locked = false;
});