SetTimeout actually has a third parameter?

setTimeout actually has a third parameter?

Speaking of setTimeout, everyone is familiar with it, and its usage is very simple: setTimeout(fun, delay).

But you may not believe it, but setTimeout, which has been used for so many years, actually has a third parameter. Let’s take a look at the third parameter of setTimeout.

[Related course recommendations: JavaScript video tutorial]

Let’s look at a simple code first:

setTimeout(function(x) {
    console.log(x);
}, 1000, 1);

The console outputs 1, then it can Why can't I continue to add parameters? Let's continue to look at the following code:

setTimeout(function(x,y) {
    console.log(x+y);
}, 1000, 1, 2);

The console output is 3, which is obviously the sum of the third and fourth parameters.

After seeing this, many friends should realize that, yes, the third parameter of setTimeout is the parameter of the first function of setTimeout.

By querying MDN https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout we can see the description of the third parameter:

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

So, to be precise, setTimeout can have countless parameters, but starting from the third parameter, it is optional parameters.

Okay, what problems can we solve after knowing this feature? The most classic one is to use setTimeout within a for loop.

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

The above example is a classic interview question. It will output 6 consecutively 6 times because setTimeout is an asynchronous operation, and by the time setTimeout is executed, the for loop has been executed, and i has been is equal to 6, so 6 times 6 is output. I have summarized several solutions. Interested friends can read my last blog "About using setTimeout in for loops". At the end of this blog, I mentioned using the third parameter of setTimeout. Let's come back. Check out this approach.

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

Since each parameter passed in is the value taken from the for loop, 0~5 will be output in sequence. Of course this is still a scope issue, but here the third parameter of setTimeout saves the value of i. This solution is much lighter than using closures.

In addition, the third parameter can also be used as a function.

for(var i=0;i<6;i++) {

    setTimeout(function(j) {

        console.log(j);

    }, 1000, i);

}

The final output is 0 for the first time and 1 for the second time.

You can see that the third parameter can also be executed first, and then the function is executed.

Finally, one thing you need to pay attention to when using the third parameter is the compatibility issue. If you need to be compatible with IE9 and previous versions, you need to introduce a piece of code provided by MDN that is compatible with old IE https://developer.mozilla .org/zh-CN/docs/Web/API/Window/setTimeout#Compatible with old environment (polyfill), the portal is posted here, if you are interested, you can take a look.

The following is a description of compatibility on MDN:

Note: Passing additional arguments to the function in the first syntax does not work in Internet Explorer 9 and below. If you want to enable this functionality on that browser, you must use a polyfill (see the Polyfill section).

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of SetTimeout actually has a third parameter?. For more information, please follow other related articles on the PHP Chinese website!