setTimeout第三个参数

我们先看下MDN的介绍： setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

语法

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

参数

function：function 是你想要在到期时间(delay 毫秒)之后执行的函数。

code：这是一个可选语法，你可以使用字符串而不是 function ，在 delay 毫秒之后编译和执行字符串 (使用该语法是不推荐的)。

delay(可选)：延迟的毫秒数 (一秒等于 1000 毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay 取默认值 0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay 毫秒数) 值长。

arg1, ..., argN(可选)：附加参数，一旦定时器到期，它们会作为参数传递给。

我们可以知道定时器启动的时候，第三个及以后的参数会作为第一个 func()的参数传进去。

应用一

一起来看个经典的栗子吧：

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

上面这个栗子，大家都知道会连续输出 5 个 5，因为 setTimeout 是一个异步操作，而等到执行 setTimeout 时，for 循环已经执行完毕，这时的 i 已经等于 5，所以输出 5 次 5。当然，这并不是我们想要的。

方案一

最常见的改进方案是使用闭包。通过闭包，可以将变量 i 驻留在内存中，当输出 j 时，引用的是外部函数传递的变量 i，这个 i 是根据循环来的，执行 setTimeout 时已经确定了里面 i 的值，进而确定了 j 的值。

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

方案二

运用 setTimeout 的第三个参数。由于每次传入的参数是从 for 循环里面取到的值，所以会依次输出 0~4。

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

应用二

这个用例的使用场景不常见，但可以对 setTimeout 有进一步的了解。

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

上面的结果是，div 元素内的字体样式 5 秒后变黑，10 秒后再变红。