If I registered a time-consuming callback function to an event listener, and this event is fired twice in a short period. Will the second callback be blocked by the first one?

I tried this in browser:

document.body.onclick = function() {
    var date = new Date;
    console.log('click event at ' + date);

    while(new Date - date < 1e4) {};

    console.log('callback end');
}

As the result, the second callback was executed right after the first one is done.

So now I am confusing with the JavaScript non-blocking async module: which part has been executed asynchronously?

If I registered a time-consuming callback function to an event listener, and this event is fired twice in a short period. Will the second callback be blocked by the first one?

I tried this in browser:

document.body.onclick = function() {
    var date = new Date;
    console.log('click event at ' + date);

    while(new Date - date < 1e4) {};

    console.log('callback end');
}

As the result, the second callback was executed right after the first one is done.

So now I am confusing with the JavaScript non-blocking async module: which part has been executed asynchronously?

• javascript
• asynchronous

1 Answer 1

Javascript in a browser is single threaded and works off an event queue. One event will run to pletion before the next event is triggered. So, if a second click occurs while the first is still processing, the second click will be queued and will not run until the code processing the first one is done.

You can read more about this event queue concept here:

How does JavaScript handle AJAX responses in the background?

In your particular example, once your code starts running, it is all synchronous. The while loop runs until pletion and is blocking (keeping any other Javascript from running until it is done).

There are asynchronous ways to schedule some code to run in the future (using setTimeout() or setInterval()) that would allow other code to run in the meantime, but you aren't using that mechanism.