JavaScript 中的 setTimeout 方法详解
setTimeout 是 JavaScript 中一个非常常用的计时器函数，它可以在指定时间后执行一个给定的函数。setTimeout 语法如下：
setTimeout(function, delay, arg1, arg2, ...);
function: 要执行的函数。delay: 延迟的毫秒数。arg1,arg2, ...: 传递给函数的参数（可选）。
延时执行
使用 setTimeout 时，我们可以设置一个延迟，单位是毫秒。例如，下面的代码将在 2 秒后执行一个函数：
setTimeout(() => {
console.log("2秒后执行的代码");
}, 2000);
在这个例子中，console.log 会在 2 秒后被调用。
清除 setTimeout
有时候我们需要取消即将执行的定时任务，clearTimeout 函数可以实现这一点。要使用 clearTimeout，首先需要保存 setTimeout 返回的 ID。
const timeoutId = setTimeout(() => {
console.log("这条信息不会被打印");
}, 5000);
// 取消定时任务
clearTimeout(timeoutId);
在这个例子中，clearTimeout 将会取消在 5 秒后执行的函数，因此没有任何输出。
计时开始时间
需要注意的是，setTimeout 的使用时间并不一定是精确的。在实际中，由于JavaScript是单线程的，执行栈中的其他任务可能会阻塞定时器的执行。因此实际的延时可能会比预设的时间更长。这就导致了 setTimeout 的时间是一个最小值，而不是精确值。
console.log("开始计时");
setTimeout(() => {
console.log("这条信息将在尽量延时500毫秒后打印");
}, 500);
for (let i = 0; i < 1e8; i++) { } // 模拟耗时操作
console.log("计时结束");
在这个例子中，尽管我们设定了 500 毫秒的定时器，由于循环的耗时，输出可能会延迟。
0 秒延时解析
setTimeout 的延迟时间可以设置为 0，这意味着该函数会在当前执行栈清空后立即执行，但不能保证它会立刻执行，这对异步编程非常有帮助。
console.log("开始");
setTimeout(() => {
console.log("0 秒延时的任务");
}, 0);
console.log("结束");
在这里，尽管设置了 0 毫秒，"0 秒延时的任务" 并不是立刻打印的，而是在当前执行完成后执行。
多个 setTimeout 的执行顺序
当设置多个 setTimeout，它们会根据设置的延迟时间依次执行。
setTimeout(() => {
console.log("任务1");
}, 1000);
setTimeout(() => {
console.log("任务2");
}, 500);
setTimeout(() => {
console.log("任务3");
}, 0);
在这个例子中，执行顺序将是 "任务3"，"任务2"，"任务1"。
setTimeout 应用场景
- 动态加载内容：例如在页面中加载后就显示提示信息或功能。
- 轮播图自动切换：可以用于图片轮播计时。
- 防抖和节流处理：结合输入框事件，可以控制频繁触发的事件。
网红面试题
面试中常常会问带有 setTimeout 的一些问题，比如：
console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
你会得到什么输出？答案是 1 3 2，因为 setTimeout 将会在当前调用栈完成后再执行。
总结来说，setTimeout 是一个非常灵活且常用的工具，在正确理解其行为并善加利用的情况下，可以极大丰富我们在 JavaScript 中的异步编程能力。
