SetTimeout learning Summary

This article mainly introduces the setTimeout principle, the significance of setTimeout (function () {...}, 0), the this point of setTimeout and parameter issues. It has good reference value. Let's take a look at it below. This article mainly introduces the setTimeout principle; setTimeout (function (){..}, 0); this point of setTimeout and parameter issues. It has good reference value. Let's take a look at it together with the small Editor.

Overview

I read an article today and thought it was well written. So I learned it. This blog is my own understanding and summary.

Original article: setTimeout secrets you should know

Main content:

1. setTimeout Principle

2. Significance of setTimeout (function () {..}, 0)

3. this point of setTimeout and parameter problems

SetTimeout Principle

Let's take a look at a piece of code:

var start = new Date(); setTimeout(function(){  console.log(new Date() - start); },500); while(new Date() - start <= 1000 ){}

The output is1003(Numbers may be different, but they all exceed 1000)

This is because the code in setTimeout is put into the execution queue after ms, but then the while loop is executed, and the while LOOP occupies computer resources, to occupy 1000 ms, the tasks in the queue must wait until the while loop ends.

It can be seen that the principle of setTimeout is to add the task to the queue after a specified time and wait for the cpu to schedule the task. It cannot guarantee when the task will be executed.

SetTimeout (function () {...}, 0) Meaning

Sometimes I have seen such code:

 setTimeout(function(){  //........... },0);

After the previous study, I thought that when the code is executed to setTimeout, the task will be immediately added to the execution queue. In fact, although the given delay execution time is 0, setTimeout has its own minimum delay time (varies depending on the browser), so even if it is written for 0 s, however, setTimeout still adds tasks to the execution queue after the minimum delay.

Set 0 s to change the execution sequence of tasks! Because the browser will finish the tasks in the current task queue and then execute the tasks accumulated in the setTimeout queue.

For example:

window.onload = function(){ document.querySelector('#one input').onkeydown = function(){  document.querySelector('#one span').innerHTML = this.value; }; document.querySelector('#two input').onkeydown = function(){  setTimeout(function(){  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;  },0) } }

This problem occurs:

It can be found that when the first method is used, only the content in the input box is obtained before the keyboard is pressed.

The cause is that when we press the keyboard, the JavaScript engine will execute the keydown event handler, and the value in the update input box will be executed afterwards, so when you get the value (this. value), the value in the input box is also updated.

The solution is to use setTimeout to obtain the value of the input box after updating the value.

This point of setTimeout and parameter problems

In setTimeout, this of the callback function points to the window

For example:

var a = 1; var obj = {  a : 2,  output : function(){  setTimeout(function(){   console.log(a);  },0);  } } obj.output(); //1

However, we can use apply (), call (), and bind () to change the point of this.

SetTimeout is usually two parameters, but it can be composed of multiple parameters

For example:

 setTimeout(function(a,b){  console.log(a); //2  console.log(b); //4  console.log(a + b); //6 },0,2,4);

As you can see, these parameters are the parameters to be passed in the callback function.

For more information about setTimeout, see the PHP Chinese Web!