js實現(xiàn)0ms延時定時器的幾種方式

第js實現(xiàn)0ms延時定時器的幾種方式目錄queueMicrotask

async/await

MessageChannel

最后

附錄

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

(function(){

vartimeouts=[];

varmessageName="zero-timeout-message";

//LikesetTimeout,butonlytakesafunctionargument.There's

//notimeargument(alwayszero)andnoarguments(youhavetouseaclosure)

functionsetZeroTimeout(fn){

timeouts.push(fn);

window.postMessage(messageName,"*");

functionhandleMessage(event){

if(event.source==windowevent.data==messageName){

event.stopPropagation();

if(timeouts.length0){

varfn=timeouts.shift();

fn();

window.addEventListener("message",handleMessage,true);

//Addtheonethingwewantaddedtothewindowobject.

window.setZeroTimeout=setZeroTimeout;

})();

作者還提供了一個demo頁面【3】，通過于setTimeout(0)進(jìn)行對比，在我瀏覽器的執(zhí)行結(jié)果如下：

100iterationsofsetZeroTimeouttook15milliseconds.

100iterationsofsetTimeout(0)took488milliseconds.

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

在深入討論各種實現(xiàn)方式之前，約定提供的setTimeout對比版本如下，后面自定義實現(xiàn)的方案都將和setTimeout版本的執(zhí)行時間進(jìn)行對比，代碼比較簡單：

(function(){

leti=0;

conststart=Date.now();

functiontest(){

if(i++100){

setTimeout(test);

}else{

console.log('setTimeout執(zhí)行時間:',Date.now()-start);

setTimeout(test);

})();

queueMicrotask

queueMicrotask這個api可以添加一個微任務(wù)，使用比較簡單，直接傳遞一個回調(diào)函數(shù)即可，具體實現(xiàn)如下：

(function(){

functionsetZeroTimeout(fn){

queueMicrotask(fn);

leti=0;

conststart=Date.now();

functiontest(){

if(i++100){

setZeroTimeout(test);

}else{

console.log('setZeroTimeout執(zhí)行時間:',Date.now()-start);

setZeroTimeout(test);

})();

通過和setTimeout版本進(jìn)行對比，最終結(jié)果如下：

setZeroTimeout執(zhí)行時間:2

setTimeout執(zhí)行時間:490

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

async/await

async/await對于前端開發(fā)人員來說已經(jīng)是必不可少的了，這里我們也可以用來實現(xiàn)：

(function(){

asyncfunctionsetAsyncTimeout(fn){

Promise.resolve().then(fn);

leti=0;

conststart=Date.now();

asyncfunctiontest(){

if(i++100){

awaitsetAsyncTimeout(test);

}else{

console.log('setAsyncTimeout執(zhí)行時間:',Date.now()-start);

setAsyncTimeout(test);

})();

通過和setTimeout版本進(jìn)行對比，最終結(jié)果如下：

setAsyncTimeout執(zhí)行時間:2

setTimeout執(zhí)行時間:490

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

MessageChannel

MessageChannel允許我們創(chuàng)建一個新的消息通道，并通過它的兩個MessagePort屬性發(fā)送數(shù)據(jù)，MessageChannel提供端口的概念，實現(xiàn)端口之間的通信，比如worker/iframe之間的通信。

(function(){

constchannel=newMessageChannel();

functionsetMessageChannelTimeout(fn){

channel.port2.postMessage(null);

channel.port1.onmessage=function(){

test();

leti=0;

conststart=Date.now();

functiontest(){

if(i++100){

setMessageChannelTimeout(test);

}else{

console.log('setMessageChannelTimeout執(zhí)行時間:',Date.now()-start);

setMessageChannelTimeout(test);

})();

通過和setTimeout版本進(jìn)行對比，最終結(jié)果如下：

setMessageChannelTimeout執(zhí)行時間:4

setTimeout執(zhí)行時間:490

第三種方式運行時間比前面兩種更長些，因為通過MessageChannel產(chǎn)生的是宏任務(wù)，其他兩種是微任務(wù)，微任務(wù)執(zhí)行靠前，且會阻塞主線程