SetTimeout is a function we often use. Its third parameter, well, I haven’t used it before. I found it by reading other people’s blogs a few days ago. At first glance, it’s wrong. Then I searched it, and there was really

setTimeout

Let’s take a look firstMDNThe setTimeout () method sets a timer that executes a function or a specified piece of code after the timer expires.

grammar

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

parameter

function: function is the function you want to execute after the expiration time (delay milliseconds).

code: This is an optional syntax. You can use string instead of function to compile and execute string after delay milliseconds (this syntax is not recommended).

Delay (optional): the number of milliseconds to delay (one second equals 1000 milliseconds), after which the function call will occur. If this parameter is omitted, the default value of delay is 0, which means to execute immediately or as soon as possible. In either case, the actual delay time may be longer than the expected value (delay milliseconds).

arg1, ..., Argn (optional)Once they expire, they are passed as additional parameters to the timer.

We can know that when the timer starts, the third and subsequent parameters will be passed in as the parameters of the first func ().

Application one

Let’s see a classic Chestnut:

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

As we all know, the chestnuts above will output five fives continuously, because setTimeout is an asynchronous operation. When setTimeout is executed, the for loop has been executed, and I at this time is equal to 5, so 5 times will be output. Of course, this is not what we want.

Scheme I

The most common improvement is to use closures. Through closures, the variable I can be stored in memory. When J is output, it refers to the variable I passed by the external function. This I is based on the loop. When setTimeout is executed, the value of I in it has been determined, and then the value of J has been determined.

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

Scheme II

Use the third parameter of setTimeout. Since the parameter passed in each time is the value obtained from the for loop, 0 ~ 4 will be output in turn.

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

Application II

The usage scenario of this use case is not common, but you can learn more about setTimeout.

var doc = document.getElementById("div");
setTimeout(
  function () {
    doc.style.color = "red";
  },
  10000,
  setTimeout(function () {
    doc.style.color = "black";
  }, 5000)
);

As a result, the font style in the div element turns black after 5 seconds and red after 10 seconds.

last

Welcome to my official account [front end technology station] to share the front-end actual combat video!