setTimeout() function in js

In js, the setTimeout() function is a global variable. No matter where it is, it is a global variable rather than a local variable. So the result of the following example may surprise you:

function A() {
    this.b = function() {
        console.log(1)
    }
}
var c = new A()
setTimeout(c.b, 10)

Some people may think that the output result of the above example is 1, but the result is undefined. This is because the setTImeout() function is a global variable. It sends the c.b inside to the global variable. However, the global variable does not have the attribute b, so it returns undefined.

In js, the operating mechanism of the setTimeout() function is like this, and the same is true for the setInterval() function. Move the specified code out of this execution, wait until the next round of Event Loop, and then check whether the specified time has arrived. If it arrives, the corresponding code will be executed; if it does not arrive, it will be re-judged until the next round of Event Loop. This means that the code specified by setTimeout will not be executed until all the codes executed this time have been executed. ·

In each round of Event Loop, the tasks that need to be executed in the "task queue" will be executed at once. Both setTimeout and setInterval add tasks to the end of the "task queue". Therefore, they actually have to wait until all synchronization tasks of the current script are executed, and then wait until all tasks of the "task queue" of this Event Loop are executed before they start execution. Since it is uncertain how long it will take to complete the previous tasks, there is no way to guarantee that the tasks specified by setTimeout and setInterval will be executed according to the scheduled time.

So if a previous function is blocked, it will wait until the function is executed before it can run. Because js is single-threaded, it is easier to block.

In the setTimeout() function, the fastest running time is 4 milliseconds. Even if the delay parameter is written as 0 or a negative number, it will not run immediately. When the delay parameter is 0 or a negative number, you need to wait for the current step's synchronization task and event loop (i.e., task queue) to be executed before starting execution. Since the parameter is 0 or a negative number, the function is just run as early as possible than other setTimeout() functions. , and the parameter is 0 or a negative number itself has the same priority. For example:

setTimeout('console.log(1)',0)
console.log(2)

The result returned is 2 1

setTimeout('console.log(1)',0)
setTimeout('console.log(2)',-1)
setTimeout('console.log(3)',-1)
setTimeout('console.log(4)',0)

The result returned is 1 2 3 4

In the setTimeout() function, there is another point that should be noted. of. That is, its first parameter must be the code that needs to be compiled or a function method. So in the above example, console.log() is enclosed in single quotes and becomes a string. There is an eval() function in setTimeout to compile the string. If we do not enclose the console.log() method in single quotes, then the entire setTimeout() function will be executed immediately, regardless of whether there are delay parameters. For example, this question I encountered in the interview of Midea’s Meiyun Smart Number is the same:

console.log(1)

setTimeout(console.log(2),0)
  
console.log(3)
  
setTimeout(console.log(4),-1)

The returned result is 1 2 3 4. If you enclose it in single quotes, the returned result is 1 3 2 4

If you want to clear the setTimeout timer in js, you need the clearTimeout() function. The specific usage is as follows:

var a = setTimeout('console.log(1)', 1)
clearTimeout(a)

Finally, a question is posted to see if you have graduated. Compare the following three pieces of code to see the output above:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
    console.log(i);
}

for (var i = 0; i < 3; i++) {
    setTimeout((function() {
        console.log(i);
    })(i), 0);
    console.log(i);
}

for (var i = 0; i < 3; i++) {
    setTimeout((function(i) {
        return function() {
            console.log(i);
        };
    })(i), 0);
    console.log(i);  
}

This question is designed with some js. Regarding the scope issue, I will write a special article to introduce the changes in scope in es5 and es6. ​

The above is the detailed content of setTimeout() function in js. For more information, please follow other related articles on the PHP Chinese website!