js实现真正0ms的setTimeout

ゝ一世哀愁。 2022-11-27 00:54 89阅读 0赞

###### *最新更新时间：2020年08月12日22:30:16* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：定时器`window.setTimeout`

#### 概述 ####

> 在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。

#### 实现源码 ####

// Only add setZeroTimeout to the window object, and hide everything else in a closure.
    (function() { 
        var timeouts = [];
        var messageName = "zero-timeout-message";
    
        // Like setTimeout, but only takes a function argument. There's
        // no time argument (always zero) and no arguments (you have to
        // use a closure).
        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);
    
        // Add the one thing we want added to the window object.
        window.setZeroTimeout = setZeroTimeout;
    })();

#### 实例 ####

console.log(1);
    setTimeout(()=>{ console.log(2)},0)
    setZeroTimeout(()=>{ console.log(3);})
    new Promise((resolve)=>{ resolve(4)}).then((res)=>{ console.log(res)})
    console.log(5);
    // 1
    // 5
    // 4
    // 3
    // 2

#### 伪方案 ####

> 微任务模式

console.log(1);
    new Promise((resolve)=>{ resolve()}).then(()=>{ console.log(2)})
    console.log(3);
    // 1
    // 3
    // 2

#### 扩展知识 postMessage ####

> 设计模式：发布-订阅模式(观察者模式)

function handleMessage(event) { 
    	console.log(event)
    	//event.data {name: "wanshaobo", age: 18}
    }
    window.addEventListener("message", handleMessage, true);
    window.postMessage({ name:'wanshaobo',age:18}, "*");

#### 参考资料 ####

*  [window.postMessage][]
 *  [setTimeout with a shorter delay][]
 *  [window.setTimeout  
    ][window.setTimeout]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[window.postMessage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
[setTimeout with a shorter delay]: https://dbaron.org/log/20100309-faster-timeouts
[window.setTimeout]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460