jsは本当に0 msのsetTimeoutを実現します.

11212 ワード

最新更新日時:2020年08月12日22:30:16《 - - 》本論文の内容:タイマーwindow.setTimeout概要
ブラウザにおいて、setTimeout()/setInterval()の各呼び出しのタイマーの最小間隔は4 msであり、これは通常関数ネストによるものであり、または既に実行されている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
// 4
// 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 sharer delay
  • window.setTimeout
  • 読んでくれてありがとうございます. ^-^