色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁技術文章
文章詳情頁

js實現0ms延時定時器的幾種方式

瀏覽:107日期:2024-03-21 18:52:10
目錄queueMicrotaskasync/awaitMessageChannel最后附錄

這兩天看到一篇介紹《如何實現準時的 setTimeout?》的文章,文章起源于一道面試題:有什么辦法讓setTimeout準時呀?具體文章內容可查看附錄【1】,看完之后,引起了我對setTimeout這個函數的探究興趣,因此在MDN上重新查閱了相關文檔,其中提到【最小延時 >=4ms】的一點,因此使用setTimeout不能實現0ms延時的定時器,如果要實現的話,提供了一個參考鏈接【2】,作者的實現思路是通過postMessage來模擬,繞過setTimeout的限制,從而實現0ms延時的定時器,說簡單來講就是起了一個宏任務去執行回調,先具體看下是怎么實現的:

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

作者還提供了一個demo頁面【3】,通過于setTimeout(0)進行對比,在我瀏覽器的執行結果如下:

100 iterations of setZeroTimeout took 15 milliseconds.100 iterations of setTimeout(0) took 488 milliseconds.

根據結果對比來看,setZeroTimeout執行比setTimeout快了上百倍,這是一個巨大的提升。今天想討論的是除了上述這種方式,還可以通過哪些方式來實現一個0ms延時的定時器呢,首先,我們要確定一下我們自定義的定時器是異步的,其次是盡可能早的被執行。說起異步,js提供了好幾種解決方案,我們可以逐一去驗證。

在深入討論各種實現方式之前,約定提供的setTimeout對比版本如下,后面自定義實現的方案都將和setTimeout版本的執行時間進行對比,代碼比較簡單:

(function() { let i = 0; const start = Date.now(); function test() { if(i++ < 100) { setTimeout(test); } else { console.log(’setTimeout執行時間:’, Date.now() - start); } } setTimeout(test);})();queueMicrotask

queueMicrotask這個api可以添加一個微任務,使用比較簡單,直接傳遞一個回調函數即可,具體實現如下:

(function() { function setZeroTimeout(fn) { queueMicrotask(fn); } let i = 0; const start = Date.now(); function test() { if(i++ < 100) { setZeroTimeout(test); } else { console.log(’setZeroTimeout執行時間:’, Date.now() - start); } } setZeroTimeout(test);})();

通過和setTimeout版本進行對比,最終結果如下:

setZeroTimeout執行時間: 2setTimeout執行時間: 490

關于這個API的介紹在MDN上有詳細的說明,就不展開介紹了,這里多說一點,根據規范文檔的說明,大多數情況下,推薦使用requestAnimationFrame()和requestIdleCallback()等api,因為queueMicrotask會阻塞渲染,在很多時候都不是一種好的實踐。

async/await

async/await對于前端開發人員來說已經是必不可少的了,這里我們也可以用來實現:

(function() { async function setAsyncTimeout(fn) { Promise.resolve().then(fn); } let i = 0; const start = Date.now(); async function test() { if (i++ < 100) { await setAsyncTimeout(test); } else { console.log(’setAsyncTimeout執行時間:’, Date.now() - start); } } setAsyncTimeout(test);})();

通過和setTimeout版本進行對比,最終結果如下:

setAsyncTimeout執行時間: 2setTimeout執行時間: 490

如果不嫌麻煩,還可以通過Promise來實現,其實都是大同小異,無非多些點代碼,這里就省略了。

MessageChannel

MessageChannel允許我們創建一個新的消息通道,并通過它的兩個MessagePort屬性發送數據,MessageChannel提供端口的概念,實現端口之間的通信,比如worker/iframe之間的通信。

(function() { const channel = new MessageChannel(); function setMessageChannelTimeout(fn) { channel.port2.postMessage(null); } channel.port1.onmessage = function() { test(); }; let i = 0; const start = Date.now(); function test() { if(i++ < 100) { setMessageChannelTimeout(test); } else { console.log(’setMessageChannelTimeout執行時間:’, Date.now() - start); } } setMessageChannelTimeout(test);})();

通過和setTimeout版本進行對比,最終結果如下:

setMessageChannelTimeout執行時間: 4setTimeout執行時間: 490

第三種方式運行時間比前面兩種更長些,因為通過MessageChannel產生的是宏任務,其他兩種是微任務,微任務執行靠前,且會阻塞主線程,因此時間會長一點。

最后

本文提供了三種實現方式,都是圍繞js提供異步解決方案來實現的,實現本身并不復雜。

附錄

​​【1】https://mp.weixin.qq.com/s/QRIXBoKr2dMgLob3Atq9-g【2】https://dbaron.org/log/20100309-faster-timeouts【3】https://dbaron.org/mozilla/zero-timeout

到此這篇關于js實現0ms延時定時器的幾種方式的文章就介紹到這了,更多相關js 延時定時器 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 欧美一区二区高清 | 亚洲国产精品第一区二区三区 | 成人午夜视频在线观 | 午夜日本一区二区三区 | 人成18亚洲资源在线 | 男人天堂中文字幕 | 99热免费| 欧美高清videossex19 | 色婷婷国产精品欧美毛片 | 欧美在线高清视频 | 免费观看a毛片一区二区不卡 | 嫩草影院在线观看网站成人 | 欧美另类久久久精品 | 国产一级久久久久久毛片 | 国内自拍网红在线综合 | 2022麻豆福利午夜久久 | 一级做a爰片久久毛片看看 一级做a爰片久久毛片鸭王 | 亚洲欧美日韩色 | 日本网址在线观看 | 日韩在线亚洲 | 婷婷色九月综合激情丁香 | 国产呦精品一区二区三区网站 | 在线精品免费观看综合 | 99国产精品高清一区二区二区 | 性欧美videos俄罗斯 | 国产精品yjizz视频网一二区 | 精品一区二区三区免费观看 | 女人张开双腿让男人桶完整 | 草久免费视频 | www.日本在线| 特级做a爰片毛片免费看一区 | 国产精品人成人免费国产 | 免费无遮挡毛片 | 久草经典视频 | 一区二区三区四区国产精品 | 色www永久免费 | 一本伊大人香蕉高清在线观看 | 亚洲黄色三级视频 | 成人午夜私人影院入口 | 亚洲成人视 | 欧美老妇免费做爰视频 |