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

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

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

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

某些間隔會被跳過；

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

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

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

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

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

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

看一段實例：count函數(shù)實現(xiàn)數(shù)字從min增加到max，每增加一次在控制臺打印一次。結(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();

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

轉(zhuǎn)載請注明出處：https://segmentfault.com/a/1190000004639491

文章不定期更新完善，如果能對你有一點點啟發(fā)，我將不勝榮幸。