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?

Is calculateSomethingHeavy heavy or asynchronous (or both)? Those are very distinct concepts — CertainPerformance
– CertainPerformance, Commented Jul 8, 2018 at 20:22
If calculateSomethingHeavy is meant to be asynchronous and you need locked to be set to false after it completes, then you need to return a Promise from calculateSomethingHeavy and set locked to false in its success handler. As written, this is synchronous code, so locked will be set to false immediately after calculateSomethingHeavy is called. — Daniel Beck
– Daniel Beck, Commented Jul 8, 2018 at 20:40
Actually, calculateSomethingHeavy is a bit tricky - the function fills a big canvas with pixels and after its first call it timeouts itself 99 more times to give some time for refreshing progress bars on the page (so each function call does 1% of all calculations). But the thing is, eventListener behaviour doesn't depend on existence of those timeouts, so I put simplified version here (I hope solution also doesn' depend on that) — Roman Sergeev
– Roman Sergeev, Commented Jul 9, 2018 at 21:50

AdHorger · Accepted Answer · 2021-08-25 07:21:54Z

8

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

edited Aug 25, 2021 at 7:21

AdHorger

5366 silver badges16 bronze badges

answered Jul 8, 2018 at 21:54

Phil Booth

4,9371 gold badge36 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5063151 Over a year ago

I just want to pose a question, what value does setting the locked = false in an asynchronous call? Even if you wanted to access locked in the outside global scope, it would still have it's original value...even though the event (and async call) has fired. Out of curiosity, is there any way to set globals in async calls and read thew new values in the outside scope?

Phil Booth Over a year ago

@JabariDash, the value is in the if test at the top of the event handler. It is there to prevent re-entrancy, so if calculateSomethingHeavy is already calculating, the function becomes a NOP instead of calling it again.

Collectives™ on Stack Overflow

Asynchronous event handling in JavaScript

1 Answer 1

Callbacks

Events

Promises

async/await

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Callbacks

Events

Promises

async/await

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related