JS | setTimeout 延时器详解

目录

setTimeout 简介

清除 setTimeout

setTimeout 什么时候开始计时？

0 秒延时并不代表立即执行！

多个 setTimeout 的执行顺序 ？

setTimeout 的应用场景

setTimeout 的网红面试题

延展提问：怎样改动实现打印 0 到 9 ？

---

settimeout 的特点是，它只执行一次，如果想要再次执行，需要重新调用 settimeout。另外，settimeout 的延迟时间并不是准确的，它只是表示最早可能执行的时间，实际执行的时间可能会受到其他代码的影响，比如浏览器的事件循环，或者其他的定时器。

setTimeout 简介

setTimeout 是一个 js 内置的函数，用于延时执行代码

参数1：回调函数，延迟一段时间后执行的代码

参数2：延迟的时间，单位是毫秒。（默认为 0 毫秒）

返回值：计时器的ID，是一个整数（例子中的 timer）

const timer = setTimeout(function() {
    console.log(1); // 3 秒后，打印 1
}, 3000);

清除 setTimeout

clearTimeout(timer); // timer 为计时器的ID

参考：JavaScript setTimeout和setInterval的用法与区别详解 - 儒雅烤地瓜优快云博客  

setTimeout 什么时候开始计时？

首先， setTimeout 属于 js 异步任务中的宏任务

如上图可见，宏任务需等待同步任务、微任务、DOM渲染完成后，通过事件轮询触发执行，所以存在复杂异步逻辑时，很难精准预判 setTimeout 的开始计时时间。

逻辑简单的，比较好分析，如：

function test() {
  print("开始");

  setTimeout(() => {
    print("执行 setTimeout");
  }, 1000);

  print("结束");
}

• setTimeout 从打印 “结束” 后开始计时
• 从计时开始 1 秒后，打印 “ 执行 setTimeout ”

下方