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?
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' );
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.
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!
Just write a for loop which is printing millions numbers. Call this function on any click function. You will see the effect.
Hi, you can try this:
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.
In this particular case de-bouncing is useful when we click on button..