JavaScript 中的异步事件处理

我在防止双重（多重）方面遇到问题eventListener代码中的处理：

var locked;

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

尽管第二次立即单击按钮会触发另一个事件locked == true。像button.disabled = true or setTimeout(function() {locked = true;}, 0)没有效果，因为（我猜）第二个调用被堆叠，并且只有在第一个调用完全处理后才会被调用。我认为我缺少异步事件处理的一些完整技术。如何在纯js中做到这一点？

这里的正确答案取决于calculateSomethingHeavy。根据问题标题，它可能是异步的，但这可以使用回调、事件、承诺或异步/等待来实现。

无论其中哪一个在这里发挥作用，您需要做的是确保locked未设置为false直到之后calculateSomethingHeavy已完成。 在每种情况下，这可能如下所示......

回调

var locked;

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

Events

var locked;

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

Promises

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;
});