Was this helpful?
In the first run, uncomment out this line:
When the button is clicked, the runtime does the following: 1. It pushes the createListItems() onto the call stack. This function is a time consuming operation which adds 150,000 list items to the body element of the document. 2. It creates an event and places it in the event queue whose task is to re-render the change made to the button's background color. The event keeps waiting for its turn until the stack becomes empty.
While the createListItems() is executing, the stack is occupied and event callback placed in the event queue is waiting for its turn. After all the list items are generated, the stack becomes empty and the event loop can now fetch the message from the event queue and places it on the stack. Therefore, if you look at the result, a change in the button's color is rendered only after the createListItems() finishes its execution. Also, if you try to write something in the input box, the text will be rendered only after createListItems() completes making the browser unresponsive for the duration of the code being executed on the stack.
If you want to write the non-blocking code, you must add it to the event queue. In the second run, uncomment out this line:
This means that instead of just invoking the createListItems() directly, it is passed as a callback to the setTimeout() with a time delay of 0 seconds. Even though the setTimeout duration is 0 milliseconds, the createListItems will be placed in the waiting queue, instead of the stack, and executed at a later time. A delay of 0 ms means that you are forcing a function call to be asynchronous, but without any extra delay.
Now, if you look at the result, the button's color is rendered immediately after you click the button and then the list items are displayed later. If you try to write something in the input box, you will still observe the browser's unresponsiveness because the createListItems() will run at least for couple of seconds freezing it for that period of time.
In the third run, uncomment out this line:
Note that setTimeout() is simply a function that enqueues a function call to be executed at a later time. In itself, it cannot make the browser responsive. If you want that the user's browser should not freeze, you'll have to divide your large task into small ones, each taking little time, and then calling each of these tasks asynchronously. For example, instead of adding 150,000 list items in one single step, you can iterate 150 times and in each iteration, use the setTimeout() to add 1,000 items.
This leads to 150 events lined up in the event queue. Keep the console log open when the code is run. Observe the display of the values of the current iteration variable in the console. Notice the time delay between two displays. Immediately after clicking the button, start entering the text in the input box and you will observe the browser is now responsive to a great extent. It still freezes but only for a very small amount of time.
|posted||Sep 12, 2016|
|active||Sep 12, 2016|
|•||Reflection in .NET - Part 1|
|•||Updating a CSS class property in real-time|
|•||Client-side MVC pattern|
|•||Serialization in .NET - Part 4|
|•||Serialization in .NET - Part 3|
|•||Serialization in .NET - Part 2|
|•||Serialization in .NET - Part 1|
|•||How to create pretty URLs in Angular|
|•||In Angular what is the difference between ngRoute and ui-router|