DEV Community


Discussion on: ✨♻️ JavaScript Visualized: Event Loop

stanleysathler profile image
Stanley Sathler

Thank you so much for the illustrations, Lydia! Very helpful, indeed!

One question: what happens when the main thread is blocked - i.e. the UI freezes? Would the whole interaction within that viewport be blocked - e.g. cursor wouldn't change after hovering a link?

I think I've never faced this situation before, so I'm curious how to identify such situation. Is there any way to simulate a huge processing in order to freeze my UI, just to see that?

Thanks in advance!

cryptic022 profile image
Pankaj Kumar

Just write a for loop which is printing millions numbers. Call this function on any click function. You will see the effect.

brunouyuy profile image

Hi, you can try this:

        function wait5seconds() {
            const plus5seconds = new Date().getTime() + 5000;
            while ( plus5seconds > new Date().getTime() ) {}

            console.log( 'wait5seconds end' );

        function clickHandler() {
            console.log( 'click event' );

        document.addEventListener( 'click',
            clickHandler ); // al comunicarme con la API del DOM estoy saliendo de JS 

        console.log( 'end script execution' );

Execute this script, and press a lot of clicks, the clicks events will appear at the end ( because the dom events are push into the queue.

I think that what you need to take into consideration is when you are performing a task that it might take some time, that might block the UI.

gaurangdhorda profile image

In this particular case de-bouncing is useful when we click on button..