【JavaScript】定時(shí)器清除以后回調(diào)定時(shí)器

impig33 發(fā)布于2019-08-19 17:54 / 873人閱讀

摘要：鏈?zhǔn)秸{(diào)用的模式下面是實(shí)現(xiàn)定時(shí)器清除以后回調(diào)定時(shí)器的一段偽代碼看一段實(shí)例函數(shù)實(shí)現(xiàn)數(shù)字從增加到，每增加一次在控制臺(tái)打印一次。結(jié)束以后可以立即執(zhí)行回調(diào)函數(shù)。

在《JavaScript高級(jí)程序設(shè)計(jì)》一書(shū)中，列舉了兩條setInterval()的缺點(diǎn)：

某些間隔會(huì)被跳過(guò)；

多個(gè)定時(shí)器的代碼執(zhí)行之間的間隔可能會(huì)比預(yù)期的小。

書(shū)中給出了替代方案：鏈?zhǔn)秸{(diào)用setTimeout()。所以我現(xiàn)在更傾向于使用setTimeout()。

鏈?zhǔn)秸{(diào)用setTimeout()的模式：

setTimeout(function(){
    //todo
    setTimeout(arguments.callee, delay);
}, delay);

下面是實(shí)現(xiàn)定時(shí)器清除以后回調(diào)定時(shí)器的一段偽代碼：

function callbackTimer(..., fn) {
    return function() {
        setTimeout(function() {
            if (...) {
                //todo
                setTimeout(arguments.callee, delay);
            } else if (fn instanceof Function) {
                fn();
                fn = null;
            }
        }, delay)
    };
}

看一段實(shí)例：count函數(shù)實(shí)現(xiàn)數(shù)字從min增加到max，每增加一次在控制臺(tái)打印一次。結(jié)束以后可以立即執(zhí)行回調(diào)函數(shù)。

function count(min, max, delay, fn) {
    return function() {
        setTimeout(function() {
            if (min <= max) {
                console.log(min++);
                setTimeout(arguments.callee, delay);
            } else if (fn instanceof Function) {
                fn();
                fn = null;
            }
        }, delay);
    };
}
var count2 = count(11, 20, 500);
var count1 = count(1, 10, 200, count2);
count1();

在控制臺(tái)內(nèi)先以0.2s一次的頻率打印1~10，之后再以0.5s一次的頻率打印11~20。

轉(zhuǎn)載請(qǐng)注明出處：https://segmentfault.com/a/1190000004639491
文章不定期更新完善，如果能對(duì)你有一點(diǎn)點(diǎn)啟發(fā)，我將不勝榮幸。

GPU云服務(wù)器云服務(wù)器 javascript 定時(shí)器 javascript定時(shí)器 javascript中定時(shí)器 javascript計(jì)時(shí)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78949.html

相關(guān)文章

細(xì)說(shuō) Javascript 拾遺篇（四） : setTimeout 和 setInterval

摘要：當(dāng)間隔時(shí)間設(shè)置較小時(shí)，將會(huì)導(dǎo)致回調(diào)函數(shù)堆積。處理可能阻塞的代碼最簡(jiǎn)單且最可控的方式就是在回調(diào)函數(shù)內(nèi)部使用函數(shù)。但是很明顯，由于指定最大值的限制，還會(huì)有定時(shí)器沒(méi)有被清除掉。另外，盡量避免使用函數(shù)，從而避免可能導(dǎo)致的回調(diào)函數(shù)堆積現(xiàn)象。由于 Javascript 是異步的，因此我們可以通過(guò) setTimeout 和 setInterval 函數(shù)來(lái)指定特定時(shí)間執(zhí)行代碼。 function ...

wangjuntytl 2019-08-19 14:49 評(píng)論0 收藏0
前端面試--瀏覽器

摘要：打開(kāi)一個(gè)網(wǎng)頁(yè)，看到服務(wù)器返回給客戶(hù)端瀏覽器的各種文件類(lèi)型圖片構(gòu)建瀏覽器會(huì)遵守一套步驟將文件轉(zhuǎn)換為樹(shù)。因?yàn)闉g覽器有渲染線(xiàn)程與引擎線(xiàn)程，為了防止渲染出現(xiàn)不可預(yù)期的結(jié)果，這兩個(gè)線(xiàn)程是互斥的關(guān)系。 1. 瀏覽器架構(gòu) 用戶(hù)界面主進(jìn)程內(nèi)核渲染引擎 JS 引擎執(zhí)行棧事件觸發(fā)線(xiàn)程消息隊(duì)列微任務(wù) 宏任務(wù) 網(wǎng)絡(luò)異步線(xiàn)程定時(shí)器線(xiàn)程 2. 從輸入 url 到頁(yè)面展示...

bigdevil_s 2019-08-23 17:20 評(píng)論0 收藏0
Nodejs高性能原理(下) --- 事件循環(huán)詳解

摘要：如果一個(gè)即時(shí)定時(shí)器是被一個(gè)正在執(zhí)行的回調(diào)排入隊(duì)列的，則該定時(shí)器直到下一次事件循環(huán)迭代才會(huì)被觸發(fā)。參數(shù)描述在事件循環(huán)的當(dāng)前回合結(jié)束時(shí)要調(diào)用的函數(shù)。事件輪詢(xún)隨后的調(diào)用，會(huì)在任何事件包括定時(shí)器之前運(yùn)行。系列文章 Nodejs高性能原理(上) --- 異步非阻塞事件驅(qū)動(dòng)模型Nodejs高性能原理(下) --- 事件循環(huán)詳解前言終于開(kāi)始我nodejs的博客生涯了,先從基本的原理講起.以前寫(xiě)...

newsning 2019-08-26 10:44 評(píng)論0 收藏0
前端20個(gè)真正靈魂拷問(wèn)，吃透這些你就是中級(jí)前端工程師【上篇】

摘要：還是老規(guī)矩，從易到難吧傳統(tǒng)的定時(shí)器，異步編程等。分配對(duì)象時(shí)，先是在空間中進(jìn)行分配。內(nèi)存泄漏內(nèi)存泄漏是指程序中己動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放，造成系統(tǒng)內(nèi)存的浪費(fèi)，導(dǎo)致程序運(yùn)行速度減慢甚至系統(tǒng)崩潰等嚴(yán)重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網(wǎng)上參差不棄的面試題，本文由淺入深，讓你在...

mdluo 2019-08-30 15:44 評(píng)論0 收藏0
前端20個(gè)真正靈魂拷問(wèn)，吃透這些你就是中級(jí)前端工程師【上篇】

摘要：還是老規(guī)矩，從易到難吧傳統(tǒng)的定時(shí)器，異步編程等。分配對(duì)象時(shí)，先是在空間中進(jìn)行分配。內(nèi)存泄漏內(nèi)存泄漏是指程序中己動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放，造成系統(tǒng)內(nèi)存的浪費(fèi)，導(dǎo)致程序運(yùn)行速度減慢甚至系統(tǒng)崩潰等嚴(yán)重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網(wǎng)上參差不棄的面試題，本文由淺入深，讓你在...

leap_frog 2019-08-26 10:46 評(píng)論0 收藏0