JavaScript中的异步事件处理

Question

我在阻止代码中进行双重（多个）QSqlDatabase::database().driver()->hasFeature(QSqlDriver::Transactions); //returns false QSqlDatabase::database().transaction(); //raises exception 处理方面遇到问题：

eventListener

第二次立即单击按钮会触发另一个事件，尽管有var locked; button.addEventListener("click", function() { if (locked) return; locked = true; calculateSomethingHeavy(); locked = false; } 。 locked == true或button.disabled = true之类的东西无效，因为（我猜）第二个调用是堆叠的，只有在第一个调用得到完全处理后才会被调用。我想我缺少异步事件处理的全部技术。如何在纯js中做到这一点？

Answer 1

此处的正确答案取决于calculateSomethingHeavy的定义。大概它基于问题标题是异步的，但是可以使用回调，事件，promise或async / await来实现。

无论使用哪种功能，都需要确保locked结束后才将false设置为calculateSomethingHeavy。 每种情况下看起来都可能如下：

回调

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", function() {
    if (locked) return;
    locked = true;
    await calculateSomethingHeavy();
    locked = false;
});