Novel alternative to setTimeout()
Why it is important to interrupt long tasks or chained microtasks and how to do it
The browser executes JavaScript code, responds to user-triggered events and renders the DOM using the same execution thread. When JavaScript code is running, the web page gets unresponsive because the browser cannot do anything but only wait for the code to complete its execution.
To illustrate the issues with long running tasks and also their solutions, I made up a colorful sample problem with emojis.
Any character has its code, but not all codes have an associated character. All the non-character codes are displayed as the white vertical rectangle. You can see many of them below in a page displaying characters corresponding to a range of codes:
There many vertical rectangles. I want to filter them out. Certainly there are more efficient approaches, but to exemplify long tasks, I deliberately use a slow inefficient algorithm comparing images.