DEV Community

Discussion on: ✨♻️ JavaScript Visualized: Event Loop

View post
Collapse
 
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!

Collapse
 
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.

Collapse
 
brunouyuy profile image
bru •

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 

        wait5seconds();
        console.log( 'end script execution' );
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
gaurangdhorda profile image
GaurangDhorda •

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