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)这样的事情没有影响，因为（我猜）第二个调用是堆叠的，并且只有在第一个被完全处理后才会被调用。我想我缺少一些异步事件处理的完整技术。如何在纯js中做到这一点？

Answer 1

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

无论这些中的哪一个在这里起作用，您需要做的是确保在完成后才locked将其设置为。在每种情况下，这可能如下所示......falsecalculateSomethingHeavy

回调

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

承诺

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