Settimeout_javascript techniques for cognitive delay time of 0

Let's take a look at my previous article: JavaScript's 9 traps and comments, which are mentioned in the 9th Focus Pocus. The original author of this knowledge is biased, in fact, not only the problem of IE, but the existing JavaScript engine for the thread implementation of the problem (on the thread, my concept is actually not much, if not, I hope the reader will advise). Let's look at 1 and 2. If you can look at the source code, you will find that our task is very simple, is to add an input text box to the document, and focus and select. Please click now to see that 1 is not able to focus and select, and 2 can. The difference between them is that in the execution:

Input.focus ();
Input.select ();
, 2 has a settimeout peripheral function with a delay time of 0, that is:

settimeout (function () {
Input.focus ();
Input.select ();
}, 0);
According to the javascript:the definitive Guide 5th 14.1, said:

In practice, SetTimeout tells the browser to enable the functions registered within settimeout after it completes the execution of the event handler for any current delay event and completes the current status update of the document.

In fact, it's a skill to jump off the queue for tasks that need to be performed. Back to the previous example, when the JavaScript engine executes the onkeypress, it is not possible to handle the focus and select events that were created at the same time because there is no multithreaded synchronization, since both events are not in the queue and after the completion of onkeypress, The JavaScript engine has discarded both events, as you can see in Example 1. In Example 2, because settimeout can jump off a task from a queue and become a new queue, the desired result can be obtained.

This is the real purpose of the settimeout of the delay event of 0. Here, you can take a look at example 3, its task is to update the input of the text in real time, now try, you will find that the preview area is always behind a beat, such as you lose A, the preview area does not appear a, in the immediate input B, a is not leisurely to appear. In fact, we have a way to allow the preview area to sync with the input box, where I did not give the answer, because the above, is to solve the idea, try it yourself!