JS高級(jí)定時(shí)器

leeon 發(fā)布于2019-08-22 10:50 / 3055人閱讀

摘要：高級(jí)定時(shí)器高級(jí)技巧異步首先，中沒(méi)有代碼是立即執(zhí)行的，而是一旦進(jìn)程空閑則立即執(zhí)行。針對(duì)第二種問(wèn)題，使用定時(shí)器是解決方法之一。為定時(shí)器設(shè)定的時(shí)間間隔使得進(jìn)程有時(shí)間在處理項(xiàng)目的事件之間轉(zhuǎn)入空閑。該函數(shù)首先清除之前設(shè)置的任何定時(shí)器。

title: 高級(jí)定時(shí)器
date: 2016-12-13
tag: JS高級(jí)技巧

0x00 異步

首先，JavaScript 中沒(méi)有代碼是立即執(zhí)行的，而是一旦進(jìn)程空閑則立即執(zhí)行。

進(jìn)程何時(shí)空閑，取決于上一個(gè)執(zhí)行隊(duì)列的執(zhí)行時(shí)間，而與此對(duì)應(yīng)的是隨著頁(yè)面中生命周期的推移而產(chǎn)生的代碼執(zhí)行順序隊(duì)列。

定時(shí)器對(duì)隊(duì)列的工作方式是，當(dāng)設(shè)定的時(shí)間過(guò)去以后將代碼插入隊(duì)列，但不代表代碼會(huì)被立即執(zhí)行。

0x01 重復(fù)定時(shí)器

很多情況下，我們都需要使用 setInterval() 重復(fù)的執(zhí)行同一段代碼去做同一件事情，而在這時(shí)，最大的問(wèn)題在于定時(shí)器可能在代碼再次被添加到隊(duì)列之前還沒(méi)有被執(zhí)行完成，從而導(dǎo)致某些間隔被跳過(guò)或者多個(gè)定時(shí)器的代碼執(zhí)行時(shí)間間隔被縮短。

為了避免以上缺點(diǎn)，可以使用鏈?zhǔn)秸{(diào)用 setTimeout() 模式

setTimeout(function(){
    // do something

    setTimeout(arguments.callee, interval);
}, interval)

一個(gè)例子:

setTimeout(function(){
    $("#block").css({
        "left": $("#block").position().left -1,
    })
    if($("#block").position().left > 0){
        setTimeout(arguments.callee, 30);
    }
    
}, 30)

0x01 數(shù)組分塊

為了防止惡意程序猿將用戶的計(jì)算機(jī)搞掛，瀏覽器對(duì) JavaScript 能夠使用的資源進(jìn)行了限制，如果代碼的運(yùn)行時(shí)間超過(guò)特定時(shí)間或者特定語(yǔ)句數(shù)量就不讓其繼續(xù)運(yùn)行。

而腳本運(yùn)行時(shí)間過(guò)長(zhǎng)的兩個(gè)主要原因是:1)過(guò)長(zhǎng)，過(guò)深嵌套的函數(shù)調(diào)用；2)進(jìn)行大量處理的循環(huán)。

針對(duì)第二種問(wèn)題，使用定時(shí)器是解決方法之一。使用定時(shí)器分隔循環(huán)，是一種叫作 數(shù)組分塊(array chunking) 的技術(shù)。

在數(shù)組分塊模式中，array 變量本質(zhì)上就是一個(gè) “代辦事項(xiàng)” 列表，它包含了要處理的項(xiàng)目，而 shift() 可以獲取隊(duì)列中下一個(gè)要處理的項(xiàng)目，然后將其傳遞個(gè)某個(gè)函數(shù)。當(dāng)隊(duì)列中還剩下其它項(xiàng)目時(shí)，則設(shè)置另一個(gè)定時(shí)器，并通過(guò) arguments.callee 調(diào)用同一個(gè)匿名函數(shù)。

function chunk(array, process, context){
    setTimeout(function(){
        var item = array.shift()
        process.call(context, item)

        if(array.length > 0){
            setTimeout(arguments.callee, 100)
        }
    }, 100)
}

chunk() 方法接收三個(gè)參數(shù)：要處理項(xiàng)目的數(shù)組，用于處理項(xiàng)目的函數(shù)，可選的運(yùn)行該函數(shù)的環(huán)境。

在函數(shù)內(nèi)部，通過(guò) call() 調(diào)用 process() 函數(shù)，這樣可以設(shè)置一個(gè)合適的執(zhí)行環(huán)境。為定時(shí)器設(shè)定的時(shí)間間隔使得 JavaScript 進(jìn)程有時(shí)間在處理項(xiàng)目的事件之間轉(zhuǎn)入空閑。

調(diào)用實(shí)例:

var data = [12,124,343,56,76767,43,654,34645,56456,767,4645]
function printValue(item){
    var div = $("#block").html()
    $("#block").html(div + item + "
")
}

chunk(data, printValue)

如上，函數(shù) printValue() 將 data 數(shù)組中的每個(gè)值輸出到一個(gè) div 元素中。由于函數(shù)處于全局作用域中，因此無(wú)需給 chunk() 函數(shù)傳遞 context 對(duì)象。

如果想保持原數(shù)組不變，則應(yīng)將該數(shù)組的克隆傳遞給 chunk()

chunk(data.concat(), printValue)

調(diào)用某個(gè)數(shù)組的.contact(),如果不傳遞任何參數(shù)，將返回和原來(lái)數(shù)組中項(xiàng)目一樣的數(shù)組。

0x02 函數(shù)節(jié)流

函數(shù)節(jié)流 的基本思想是指，某些代碼不可以在沒(méi)有間斷的情況下連續(xù)重復(fù)的執(zhí)行。

瀏覽器中某些計(jì)算和處理的代價(jià)要比其他的昂貴很多，比如，DOM 操作比非 DOM 交互需要更多的內(nèi)存和 CPI 時(shí)間，而進(jìn)行過(guò)多的 DOM 相關(guān)操作可能導(dǎo)致瀏覽器掛起甚至崩潰，對(duì)于這種問(wèn)題，可以使用定時(shí)器對(duì)函數(shù)進(jìn)行節(jié)流。

函數(shù)節(jié)流的基本模式可以簡(jiǎn)化如下:

function throttle(method, context){
    clearTimeout(method.tId)
    method.tId = setTimeout(function(){
        method.call(context)
    }, 100)
}

throttle() 函數(shù)接收兩個(gè)參數(shù): 要執(zhí)行的函數(shù)以及在哪個(gè)作用域中執(zhí)行。該函數(shù)首先清除之前設(shè)置的任何定時(shí)器。定時(shí)器 ID 是存儲(chǔ)在函數(shù)的 tId 屬性中的，當(dāng)然，首次將方法傳遞給 throttle 函數(shù)可能并不存在該屬性。然后定義一個(gè)新的定時(shí)器，并將 ID 存儲(chǔ)在 tId 屬性中。而 call() 用來(lái)確保方法在適當(dāng)?shù)沫h(huán)境中執(zhí)行。如果沒(méi)有給出第二個(gè)參數(shù)，那么就在全局作用域內(nèi)執(zhí)行該方法。

在 setTimeout() 中用到的函數(shù)其執(zhí)行環(huán)境總是 window

throttle 方法調(diào)用實(shí)例:

function resizeDiv(){
    var div = document.querySelector("#block")
    div.style.height = div.offsetWidth + "px"    
}

window.onresize = function(){
    throttle(resizeDiv)
}

如上，為了保證在 resize 事件中瀏覽不會(huì)進(jìn)行高頻率，或者多次計(jì)算，我們給 window.onresize 綁定了一個(gè)函數(shù),在該函數(shù)調(diào)用了 throttle 方法，從而在窗口大小發(fā)生改變的時(shí)候是 div#block 的高度與其寬度保持一致。