E常編程學(xué)

最近做了一個(gè)中央空調(diào)的demo，用了很多的定時(shí)器，而且又要關(guān)機(jī)/待機(jī)時(shí)暫停定時(shí)器，開機(jī)啟動(dòng)定時(shí)器什么的，定時(shí)器又沒(méi)給你暫停功能，我最開始只能清除再設(shè)定，清除再設(shè)定。真的很麻煩。于是吸取如vue等前端框架的數(shù)據(jù)驅(qū)動(dòng)的思想，我將定時(shí)器也數(shù)據(jù)驅(qū)動(dòng)化了?。?。

原本我們?nèi)粝雽⒁粋€(gè)定時(shí)器暫?；蚯宄?，我們通常會(huì)用clearInterval()的方法。我們?cè)趕etInterval時(shí)存儲(chǔ)這個(gè)Interval的id，之后再需要暫停時(shí)通過(guò)id查找并清除該定時(shí)器（甚至需要記錄請(qǐng)出時(shí)變化的數(shù)據(jù)），等到需要定時(shí)器繼續(xù)運(yùn)轉(zhuǎn)我們就setInterval()在創(chuàng)建一次。

本次在大量使用定時(shí)器的過(guò)程中，為了優(yōu)化繁瑣的操作，我給定時(shí)器內(nèi)部回調(diào)函數(shù)添加了數(shù)據(jù)驅(qū)動(dòng)，每個(gè)操作對(duì)應(yīng) 一個(gè)常駐定時(shí)器，只在頁(yè)面初始化時(shí)創(chuàng)建一次定時(shí)器，后續(xù)不再重新創(chuàng)建或釋放
接下來(lái)我會(huì)舉幾個(gè)本次做的例子：

下面是一個(gè)幫助識(shí)別長(zhǎng)按的定時(shí)器。
具體需求:一個(gè)鎖定鍵，長(zhǎng)按1秒鎖定，長(zhǎng)按1秒解鎖。

常駐定時(shí)器本體：
這里我們通過(guò)`lockTimernum`這個(gè)計(jì)數(shù)器的值來(lái)驅(qū)動(dòng)操作，每次循環(huán)給計(jì)數(shù)器+1
判斷計(jì)數(shù)器等于2或12時(shí)做`鎖定`或`解鎖`操作，否則無(wú)操作。
主旨就是通過(guò)判斷計(jì)數(shù)器的值來(lái)決定是否觸發(fā)定時(shí)器內(nèi)的某些操作。

setInterval(function () {
                lockTimernum ++
                if(lockTimernum == 2){
                    islocked = false //解鎖
                    $(".lock").attr("hidden",true) //隱藏鎖圖標(biāo)
                }
                if(lockTimernum == 12){
                    $(".lock").attr("hidden",false) //顯示鎖圖標(biāo)
                    islocked = true //鎖定
                }
            },500) //0.5秒執(zhí)行一次

事件只修改數(shù)據(jù)：
長(zhǎng)按開始時(shí)置計(jì)數(shù)器0或10，
這之后當(dāng)計(jì)數(shù)器執(zhí)行第2次時(shí)（因?yàn)楫?dāng)前設(shè)定了0.5秒一循環(huán)，所以也就是過(guò)了1秒），
就會(huì)觸發(fā)計(jì)時(shí)器內(nèi)的`鎖定`或者`解鎖`操作。

長(zhǎng)按結(jié)束時(shí)，計(jì)數(shù)器置100，
如果長(zhǎng)按不足1s，計(jì)數(shù)器會(huì)提前置100，
也就是說(shuō)本次`不會(huì)觸發(fā)鎖定`或解鎖操作了（置100后，lockTimernum == 2或者12的情況不會(huì)發(fā)生了）。

lockBtn.on('touchstart',function () {
            if(islocked){
                lockTimernum = 0
            }else{
                lockTimernum = 10
            }
        })
lockBtn.on('touchend',function () {
            lockTimernum = 100
        })

通過(guò)上面的例子大家應(yīng)該對(duì)數(shù)據(jù)驅(qū)動(dòng)的定時(shí)器有了初步認(rèn)識(shí)，接下來(lái)我們來(lái)加上其他功能。
具體需求：
1.共有4種狀態(tài)，3分鐘切換一次，并循環(huán)。
2.待機(jī)時(shí)或關(guān)機(jī)時(shí)沒(méi)有動(dòng)態(tài)變化，喚醒或開機(jī)后繼續(xù)。

function setCenterTimer() {
            centerTimer = setInterval(function () {
                if(powerStatic != 2){
                    return  // 判斷不是啟動(dòng)態(tài)不做后續(xù)操作，此時(shí)定時(shí)器約等于暫停了
                }

                ----下面實(shí)現(xiàn)了4種狀態(tài)，3分鐘一切換，循環(huán)播放----

                centerTimernum++  // 每次循環(huán)計(jì)數(shù)器+1
                if(centerTimernum%180 == 0){
                    return  // 剛好經(jīng)過(guò)180秒（180的整數(shù)倍）時(shí)，才繼續(xù)做狀態(tài)切換，否則不做后續(xù)操作
                }
                let centerFlag = parseInt(centerTimernum/180)  // 判斷將要切換到哪個(gè)狀態(tài)
                if(centerFlag%4 == 1){
                    數(shù)據(jù)A
                }
                if(centerFlag%4 == 2){
                    數(shù)據(jù)B
                }
                if(centerFlag%4 == 3){
                    數(shù)據(jù)C
                }
                if(centerFlag%4 == 0){
                    數(shù)據(jù)D
                }
            },1000)
        }

如果我們用傳統(tǒng)釋放定時(shí)器的方式，那么釋放時(shí)我們還需記錄運(yùn)行時(shí)間，當(dāng)前狀態(tài)等。重新創(chuàng)建我們還需要把記錄的值傳遞進(jìn)去，不甚繁瑣。

以上兩個(gè)例子就是本次思想的精髓，之后準(zhǔn)備二次封裝一個(gè)新的定時(shí)器，敬請(qǐng)期待
做完了：數(shù)據(jù)驅(qū)動(dòng)二次封裝定時(shí)器工具類
球球你們看完點(diǎn)個(gè)贊吧。