setTimeout的执行时机之所以总是不够精确，其根本原因在于它所遵循的，是JavaScript的“事件循环”与“任务队列”的异步调度机制，而非一个能够中断一切的、高优先级的“实时”定时系统。一个setTimeout(回调函数, 延迟时间)的调用，其真实的“契约”并非“在X毫秒后，立即执行这个回调函数”，而是“在X毫秒后，将这个回调函数，放入到‘任务队列’中，等待主线程空闲时，再来执行”。导致其最终执行时间，与设定的延迟时间，产生偏差的核心因素涵盖：源于JavaScript“事件循环”的非阻塞机制、定时器任务需要“排队”等待主线程空闲、主线程可能被“长时间”的同步代码所“阻塞”、浏览器或操作系统存在“最小延迟”的限制、以及系统“节流”后台标签页定时器以节省资源。
其中，主线程可能被长时间的同步代码所阻塞，是导致定时器延迟的最主要、也最可控的原因。如果主线程，正在忙于处理一个耗时巨大的计算或渲染任务，那么，即便一个定时器的回调函数，早已“到时”并在任务队列中排队，它也必须，耐心地，等待那个耗时的任务，完全结束后，才有机会被事件循环所“宠幸”并执行。
一、核心误区、将“精确延迟”等同于“到时执行”
在探讨这个问题的底层机制之前，我们必须首先，从概念上，纠正一个关于setTimeout的、极其普遍的“核心误区”。
setTimeout(回调函数, 1000) 的真正含义
许多开发者，特别是初学者，会直觉地，将这行代码，理解为：“请在1000毫秒后，准时地，执行我的回调函数”。然而，这是一种美好的、但却与事实不符的“幻想”。
它在JavaScript世界中，真正的、唯一的“契约”是：“请在‘至少’1000毫-秒之后，将我的回调函数，‘添加’到‘宏任务队列’的末尾去排队。至于它，何时，能真正地，从队列中，被取出来执行，那就要看，主线程，何时，能忙完它手头上的所有事情了。”
理解了这个“到时入队，排队等候”的核心模型，我们就掌握了解开所有setTimeout不精确之谜的“钥匙”。这个设计的背后，是JavaScript为了实现“非阻塞”这一核心特性，而做出的一个根本性的权衡。它永远，将“保障主线程的流畅、能够随时响应用户交互”的优先级，置于“保障某个后台定时器的精确执行”之上。
二、根本原因：事件循环与“任务队列”
要理解为何定时器需要“排队”，我们必须深入到JavaScript异步编程的“心脏”——事件循环。
1. JavaScript的“单线程”宿命
在浏览器环境中，JavaScript的“主线程”，是单线程的。这意味着，在任何一个时刻，它只能做一件事情。这个唯一的线程，承担着极其繁重的职责，包括：
执行JavaScript的逻辑代码。
更新页面的文档对象模型结构。
处理用户的交互事件（如点击、滚动）。
进行页面的渲染和重绘。
2. “事件循环”的调度过程
为了协调和调度这些种类繁多、发生时间不确定的任务，JavaScript引入了“事件循环”这一核心调度机制。一个简化的事件循环，其工作流程如下：
首先，执行完“调用栈”中，所有的、当前的“同步”代码。
然后，去检查一个名为“微任务队列”的、高优先级的“插队”队列。如果其中有任务，就一口气，将它们，全部执行完毕。
在微任务队列被清空后，可能会进行一次页面的渲染更新。
然后，才去那个被称为“宏任务队列”的、优先级较低的“普通”队列中，只取出一个最老的任务，并执行它。
执行完毕后，返回第二步，再次检查微任务队列。
3. setTimeout的位置
setTimeout的回调函数，在到时后，正是被放入到了那个优先级较低的“宏任务队列”之中。这意味着，它的执行，不仅需要等待当前所有的同步代码和微任务都执行完毕，还需要排在所有比它更早进入宏任务队列的其他任务（例如，另一些更早到时的定时器、或用户更早触发的点击事件）的后面。
三、延时的“元凶”一、主线程阻塞
这是导致定时器延迟的最主要、也最可控的原因。即，在定时器的“等待”期间，主线程，被一个耗时巨大的“同步”任务，给完全“霸占”了。
一个经典的代码示例：JavaScript// 1. 设置一个10毫秒后触发的定时器 setTimeout(() => { console.log("定时器回调函数被执行"); }, 10); // 2. 执行一个耗时巨大的、阻塞性的同步循环 let startTime = Date.now(); while (Date.now() - startTime < 2000) { // 这个循环，将持续地、独占性地，运行2秒钟 } console.log("同步循环结束");
执行过程分析：
程序启动，setTimeout被调用。浏览器，开始，为一个将在10毫秒后，被推入“宏任务队列”的任务，进行计时。
主线程，不会等待，而是立即，开始执行下面的while循环。
在while循环，执行到大约第10毫秒时，定时器“到时”了。于是，它的回调函数，被放入了“宏任务队列”中，开始排队。
然而，此时，主线程，正全神贯注地，在执行那个耗时2秒的while循环。事件循环，被“卡”在了执行同步代码的环节，根本没机会，去检查和处理任务队列中的任何任务。
大约2秒钟后，while循环，终于结束。console.log("同步循环结束")被打印出来。
至此，调用栈，才被清空。事件循环，得以，继续向下，并最终，从宏任务队列中，取出了那个已经苦苦等待了约1990毫秒的定时器回调，并执行它。
这个例子，清晰地，展示了主线程的“阻塞”，是如何，将一个本应在10毫秒后执行的任务，延迟到2秒后才执行的。
四、延时的“元凶”二、其他“任务”的竞争
除了被一个“大任务”阻塞，定时器的延迟，也可能源于，一系列“小任务”的“排队”竞争。
1. 宏任务队列的“拥堵” 如果，在你的定时器回调，进入宏任务队列之前，队列中，已经，存在了大量的、由其他事件（如用户连续的、快速的点击）所产生的、待处理的宏任务，那么，你的回调，就必须，遵循“先来后到”的原则，等待所有这些“前辈”任务，都被处理完毕后，才轮得到它。
2. 微任务的“优先插队” 这是一个更深层次的、关于事件循环优先级的“陷阱”。
什么是微任务？：在现代JavaScript中，由“承诺”（Promise）的.then()、.catch()、.finally()，以及async/await的后续部分，所产生的任务，都属于“微任务”。
执行优先级：如前所述，事件循环的规则是，在每一次，准备去处理“宏任务”之前，都必须，先将“微任务队列”，完全地、一口气地，清空。这意味着，微任务，拥有远高于宏任务（包括setTimeout）的“优先执行权”。
代码示例：JavaScriptsetTimeout(() => console.log("宏任务：定时器"), 0); Promise.resolve().then(() => console.log("微任务：承诺")); console.log("同步代码");
执行顺序分析：
setTimeout被调用，其回调，在0毫秒后，被放入“宏任务”队列。
Promise.resolve().then()被调用，其回调，被放入“微任务”队列。
console.log("同步代码")被执行，打印出“同步代码”。
同步代码执行完毕。事件循环，检查“微任务”队列，发现其中有任务，于是，执行它，打印出“微任务：承诺”。
微任务队列被清空。事件循环，才去检查“宏任务”队列，并执行其中的任务，打印出“宏任务：定时器”。
这个例子，清晰地，证明了，即便是一个延迟为0的setTimeout，其执行时机，也必然，晚于所有在它之前的、已进入队列的微任务。
五、延时的“元凶”三、系统与浏览器的“内置限制”
除了我们自己代码的逻辑，一些来自“外部”的、系统级的限制，也会影响setTimeout的精度。
浏览器的“最小延迟”：为了防止一些恶意的网页，通过高频的setTimeout调用，来耗尽系统资源，现代浏览器，通常，会对“嵌套”的setTimeout调用，设置一个最小4毫秒的延迟。
后台标签页的“节流”：当一个网页标签页，处于“非激活”状态时（即，用户正在浏览其他标签页），为了节省中央处理器和电池资源，浏览器，会极大地、智能地，“降低”该页面中，所有定时器的执行频率。其延迟时间，可能会被强制性地，拉长到1秒甚至更长。
操作系统的“计时器”精度：浏览器或程序运行环境的定时器，其最终，都依赖于底层“操作系统”所提供的计时器。而操作系统自身的计时器，其精度，也是有限的。
六、如何“应对”与“选择”
既然setTimeout的“不精确”，是其内在机制所决定的“天性”，那么，我们在实践中，就必须，学会如何，去“扬长避短”。
接受“不精确”的现实：首先，必须在心智模型上，彻底地，放弃对setTimeout能够实现“精确”定时的幻想。它的适用场景，永远是“我希望，这个任务，在‘至少’多久之后，被执行”，而非“我要求，这个任务，在‘恰好’多久之后，被执行”。
动画的“最佳选择”：requestAnimationFrame：如果，你的需求，是实现一个流畅的、与屏幕刷新率同步的“动画”，那么，setTimeout和setInterval，都是错误的选择。你应该，也必须，使用浏览器，专门为此而提供的接口——requestAnimationFrame。它会请求浏览器，在下一次“重绘”之前，来执行你的动画更新函数。这能够确保，你的动画，与显示器的刷新周期（通常是每秒60次），完美地同步，从而，获得最佳的流畅度和性能。
服务器端与高精度定时：对于那些需要“高精度”定时的、严肃的业务场景（例如，一个秒杀活动的“准点开抢”），绝对不能，将这个定时的逻辑，放在“客户端”（即浏览器）中。因为，客户端的环境，是极其不可控的。这类需求，必须，在“服务器端”，通过更可靠、更精确的定时任务调度框架（例如，Quartz或xxl-job），来实现。
常见问答 (FAQ)
Q1: setTimeout(回调函数, 0) 是不是意味着“立即执行”？
A1: 不是。它，仅仅意味着，将这个回调函数，“尽可能快地”，放入到“宏任务队列”的末尾去排队。它依然，需要等待，所有当前的同步代码和所有已在队列中的微任务，都执行完毕后，才能获得执行的机会。它，是实现“异步化”一段代码的、最简单的技巧，但绝非“立即执行”。
Q2: setTimeout 和 setInterval 在计时精度上有什么区别？
A2: 两者，在本质上，都受限于同样的“事件循环”机制，因此，都“不精确”。但setInterval的问题，可能更严重。因为它会“不计后果”地，每隔一段时间，就向任务队列中，添加一个新的回调。如果，主线程，持续地，被阻塞，那么，队列中，就可能会，累积起大量的、待执行的setInterval回调，导致更严重的性能问题。
Q3: 为什么 requestAnimationFrame 比 setTimeout 更适合做动画？
A3: 因为，它的执行时机，是由“浏览器”，根据其自身的“渲染节奏”，来智能地、优化地，进行调度的。这避免了，setTimeout，可能因为与渲染周期“不同步”，而导致的“丢帧”和“无效渲染”问题，从而，在能耗和流畅度上，都表现得远为出色。
Q4: 在服务器端程序中的setTimeout，和浏览器中的，行为完全一样吗？
A4: 其核心的、基于“事件循环”和“任务队列”的异步、非阻塞机制，是完全一样的。主要的区别在于“外部环境”。服务器端程序，没有“浏览器标签页切换导致节流”的问题，但它，同样会，受到“主线程被同步计算阻塞”、“微任务优先”以及“操作系统调度精度”等因素的影响。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：百晓生，转转请注明出处：https://www.chuangxiangniao.com/p/638940.html
微信扫一扫 
支付宝扫一扫 
