SetTimeout（延迟计时器-最小延迟）

setTimeout 是有最小延迟时间?   MDN 文档 setTimeout 实际延时比设定值更久的原因：最小延迟时间 在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度）。 HTML Standard Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds. (定时器可以嵌套;然而，在五个这样的嵌套定时器之后，间隔被强制为至少四毫秒。) 示例测试   let a = performance.now();   setTimeout(() => {     let b = performance.now();     console.log(b - a);     setTimeout(() => {       let c = performance.now();       console.log(c - b);       setTimeout(() => {         let d = performance.now();         console.log(d - c);         setTimeout(() => {           let e = performance.now();           console.log(e - d);           setTimeout(() => {             let f = performance.now();             console.log(f - e);             setTimeout(() => {               let g = performance.now();               console.log(g - f);             }, 0);           }, 0);         }, 0);       }, 0);     }, 0);   }, 0);   // 结果 // 1.1949999898206443 // 1.3500000059138983 // 1.9650000031106174 // 2.0650000078603625 // 5.279999983031303 // 4.63000001036562

「立刻执行」的定时器的实现 想在浏览器中实现 0ms 延时的定时器，使用 window.postMessage()。 由于 postMessage 的回调函数的执行时机和 setTimeout 类似，都属于宏任务， 所以可以简单利用 postMessage 和 addEventListener('message') 的消息通知组合，来实现模拟定时器的功能。 这样，执行时机类似，但是延迟更小的定时器就完成了。 不会随着嵌套层数的增多而增加延迟; 由于 postMessage 的实现没有被浏览器引擎限制速度 // postMessage 来实现真正 0 延迟的定时器     (function () {     var timeouts = [];     var messageName = 'zero-timeout-message';       // 保持 setTimeout 的形态，只接受单个函数的参数，延迟始终为 0。     function setZeroTimeout(fn) {       timeouts.push(fn);       window.postMessage(messageName, '*');     }       function handleMessage(event) {       if (event.source == window && event.data == messageName) {         event.stopPropagation();         if (timeouts.length > 0) {           var fn = timeouts.shift();           fn();         }       }     }     window.addEventListener('message', handleMessage, true);     window.setZeroTimeout = setZeroTimeout;  // 把 API 添加到 window 对象上   })();

100个数据     function runtest() {     var output = document.getElementById('output');     var outputText = document.createTextNode('');     output.appendChild(outputText);     function printOutput(line) {       outputText.data += line + '\n';     }     var i = 0;     var startTime = Date.now();     // 通过递归 setZeroTimeout 达到 100 计数     // 达到 100 后切换成 setTimeout 来实验     function test1() {       if (++i == 100) {         var endTime = Date.now();         printOutput('100 iterations of setZeroTimeout took ' + (endTime - startTime) + ' milliseconds.');         i = 0;         startTime = Date.now();         setTimeout(test2, 0);       } else {         setZeroTimeout(test1);       }     }     setZeroTimeout(test1);     // 通过递归 setTimeout 达到 100 计数     function test2() {       if (++i == 100) {         var endTime = Date.now();         printOutput('100 iterations of setTimeout(0) took ' + (endTime - startTime) + ' milliseconds.');       } else {         setTimeout(test2, 0);       }     }   } 100个数据测试结果；

使用场景 React 的源码中，做时间切片的部分就用到   const channel = new MessageChannel();   const port = channel.port2;     // 每次 port.postMessage() 调用就会添加一个宏任务   // 该宏任务为调用 scheduler.scheduleTask 方法   channel.port1.onmessage = scheduler.scheduleTask;     const scheduler = {     scheduleTask() {       // 挑选一个任务并执行       const task = pickTask();       const continuousTask = task();         // 如果当前任务未完成，则在下个宏任务继续执行       if (continuousTask) {         port.postMessage(null);       }     },   };

示例

参考地址
	如何实现比 setTimeout 快 80 倍的定时器	https://mp.weixin.qq.com/s/NqzWkeOhqAU85XPkJu_wCA
	MDN setTimeout	https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
	HTML Standard	https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers
	示例	https://dbaron.org/mozilla/zero-timeout
	博客实现	https://dbaron.org/log/20100309-faster-timeouts
	React Scheduler 为什么使用 MessageChannel 实现	https://juejin.cn/post/6953804914715803678