E常編程學

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

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

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

下面是一個幫助識別長按的定時器。
具體需求:一個鎖定鍵，長按1秒鎖定，長按1秒解鎖。

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

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

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

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

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

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

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

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

                centerTimernum++  // 每次循環(huán)計數(shù)器+1
                if(centerTimernum%180 == 0){
                    return  // 剛好經(jīng)過180秒（180的整數(shù)倍）時，才繼續(xù)做狀態(tài)切換，否則不做后續(xù)操作
                }
                let centerFlag = parseInt(centerTimernum/180)  // 判斷將要切換到哪個狀態(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)釋放定時器的方式，那么釋放時我們還需記錄運行時間，當前狀態(tài)等。重新創(chuàng)建我們還需要把記錄的值傳遞進去，不甚繁瑣。

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