Understanding of setTimeout

setTimeout delays the execution of code for a period of time.

setTimeout(func, 0), the effect of this code is not simply an effect of calling func directly:

　　1: Dynamically insert an element into the DOM tree, and then operate the element immediately (select the text of the text box, change the index of the select).

　　2: Because the browser is single-threaded, the js engine and the rendering engine must be executed sequentially. (For example, when a button is clicked, the browser will first change the state of the button (redraw), and then execute js (js engine))

　　3: So if you insert an element into the DOM and then operate the DOM immediately, it is likely that the DOM has not been redrawn, so the operation is invalid.

　　4: So setTimeout(func,0) can be solved (setTimeout will wait for the redraw to complete before executing the code.)

---------------The above part is the result, the following is the principle ----------------------- -------------------------------------------------------

　　think deeply:

　　5: setTimeout(func,0) is executed with a delay of 0ms, that is, executed immediately, why is it still after redrawing? The redraw must be more than 0ms.

　　6: Because of Javascript's single-threaded asynchronous mode.

7: See how javascript Timers work by 　　John Resig

-------------------The following is the understanding of this article ------------------------- -------------------------------------------------- --

　　

-- The blue ones are js blocks.

-- The numbers on the right are events.

--The number on the left is the time axis.

-- The problem is browser judgment.

Step analysis:

　　1: In the first js block, two 10ms timers are initialized (one setTimeout and one setInterval), and the mouse is clicked (the event handler for the mouse click event should also be queued and processed after the first js block is executed),

　　2: After the first js block is executed, the browser asks who is waiting for execution? (mouse click event and timer)

　　3: Execute the mouse click event, and the timer continues to wait.

　　4: When the mouse click event is executed, the 10ms interval is triggered (continue to queue without exception, and want to execute the nonexistent immediately)

　　5: After the event handler is executed, the timer starts to execute, and the interval is triggered again. . (This time the interval was dropped dropped)

　　6: After the timer is executed, the first interval is executed, and then the third interval is triggered. During its own execution, it can also be triggered.

　　7: There is nothing to queue at the end, and all intervals are executed immediately.

Then the difference between setTimeout and setInterval

1 setTimeout(function(){
2    setTimeout(arguments.callee,10);
3 },10);
4 
5 setInterval(function(){
6 },10);

These two codes seem to have the same effect, but they are actually very different. setTimeout always delays 10ms (or more, no less) after its callback function executes. But setInterval always executes every 10ms no matter how long its callback function executes.

If the callback execution time of intervals is longer than the delay you give, they will be executed together.

----------------------------------Let's talk about this in settimeout--------- ------------------------------------------

this of setTimeout is pointed to the global scope

1 var 0 = {
2   a:"a",
3   b: function(){
4       setTimeout(function(){
5          console.log(this.a);  
6       },1000);
7   }
8 }
9 o.b();// undefined

The solution is:

1 var o={
2    a:"a",
3    b:function(){
4        var that = this;
5        setTimeout(function(){
6             console.log(that.a);
7        },1000);
8    }
9 }