记录–你敢信？比 setTimeout 还快 80 倍的定时器

起因

很多人都知道，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.

简单来说，5 层以上的定时器嵌套会导致至少 4ms 的延迟。

用如下代码做个测试：

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);

(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);    // 把 API 添加到 window 对象上   window.setZeroTimeout = setZeroTimeout; })();