setTimeout

参考学习链接： setTimeout() 全局函数 - Web API 接口参考 | MDN (mozilla.org)

基本信息

方法的作用

setTimeout() 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
setTimeout() 方法是异步函数。

语法

setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)

参数

functionRef

当定时器到期后，将要执行的 function。
code

这是一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数。使用该语法是不推荐的，原因和使用 eval() 一样，有安全风险。
delay 可选

定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。

注意，无论是哪种情况，实际延迟可能会比预期长一些，参见下方延时比指定值更长的原因一节的叙述。

还要注意的是，如果值不是数字，隐含的类型强制转换会静默地对该值进行转换，使其成为一个数字——这可能导致意想不到的、令人惊讶的结果；见非数字延迟值被静默地强制转化为数字以了解一个示例。
param1, …, paramN 可选

附加参数，一旦定时器到期，它们会作为参数传递给 functionRef 指定的函数。

返回值

返回值 timeoutID 是一个正整数，表示由 setTimeout() 调用创建的定时器的编号。这个值可以传递给 clearTimeout() 来取消该定时器。

保证 timeoutID 值不会被同一对象（window 或 worker）的后续调用 setTimeout() 或 setInterval() 重复使用。然而，不同的对象使用不同的 ID 池。

描述

使用 clearTimeout() 取消超时。

如果要重复调用某个函数（如每 N 毫秒调用一次），考虑使用 setInterval()。

使用样例

两个执行方式的对比

方式一

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

方式二

for (let index = 0; index < 10; index++) {
    const element = 10;
    setTimeout(() => {
        console.log(index);
    }, 100 * index);
}

备注： setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。所以当函数被调用的时候，它会打印出 10！一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

for (var i = 0; i < 10; i++) {
    // capture the current state of 'i'
    // by invoking a function with its current value
    (function (i) {
        setTimeout(function () { console.log(i); }, 100 * i);
    })(i);
}

异步执行样例

setTimeout(() => {
    console.log("这是第一条消息");
}, 5000);
setTimeout(() => {
    console.log("这是第二条消息");
}, 3000);
setTimeout(() => {
    console.log("这是第三条消息");
}, 1000);

// 输出：

// 这是第三条消息
// 这是第二条消息
// 这是第一条消息

有关 setTimeout 的一点记录