Asynchronous event handling in JavaScript

Question

I have an issue with preventing double (multiple) eventListener handling in code:

var locked;

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

Second immediate button click triggers another event, despite locked == true. Things like button.disabled = true or setTimeout(function() {locked = true;}, 0) have no effect because (I guess) second call is stacked and will be invoked only after first is fully handled. I think I'm missing some whole technology of asynchronous event handling. How to do this in pure js?

Answer 1

The correct answer here depends on the definition of calculateSomethingHeavy. Presumably it's asynchronous based on the question title, but that could be implemented using callbacks, or events, or promises or async/await.

Regardless of which of those is at play here, what you need to do is ensure that locked is not set to false until after calculateSomethingHeavy has finished. That might look like the following in each case...

Callbacks

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

async/await

var locked;

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