E常编程学

最近做了一个中央空调的demo，用了很多的定时器，而且又要关机/待机时暂停定时器，开机启动定时器什么的，定时器又没给你暂停功能，我最开始只能清除再设定，清除再设定。真的很麻烦。于是吸取如vue等前端框架的数据驱动的思想，我将定时器也数据驱动化了！！。

原本我们若想将一个定时器暂停或清除，我们通常会用clearInterval()的方法。我们在setInterval时存储这个Interval的id，之后再需要暂停时通过id查找并清除该定时器（甚至需要记录请出时变化的数据），等到需要定时器继续运转我们就setInterval()在创建一次。

本次在大量使用定时器的过程中，为了优化繁琐的操作，我给定时器内部回调函数添加了数据驱动，每个操作对应 一个常驻定时器，只在页面初始化时创建一次定时器，后续不再重新创建或释放
接下来我会举几个本次做的例子：

下面是一个帮助识别长按的定时器。
具体需求:一个锁定键，长按1秒锁定，长按1秒解锁。

常驻定时器本体：
这里我们通过`lockTimernum`这个计数器的值来驱动操作，每次循环给计数器+1
判断计数器等于2或12时做`锁定`或`解锁`操作，否则无操作。
主旨就是通过判断计数器的值来决定是否触发定时器内的某些操作。

setInterval(function () {
                lockTimernum ++
                if(lockTimernum == 2){
                    islocked = false //解锁
                    $(".lock").attr("hidden",true) //隐藏锁图标
                }
                if(lockTimernum == 12){
                    $(".lock").attr("hidden",false) //显示锁图标
                    islocked = true //锁定
                }
            },500) //0.5秒执行一次

事件只修改数据：
长按开始时置计数器0或10，
这之后当计数器执行第2次时（因为当前设定了0.5秒一循环，所以也就是过了1秒），
就会触发计时器内的`锁定`或者`解锁`操作。

长按结束时，计数器置100，
如果长按不足1s，计数器会提前置100，
也就是说本次`不会触发锁定`或解锁操作了（置100后，lockTimernum == 2或者12的情况不会发生了）。

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

通过上面的例子大家应该对数据驱动的定时器有了初步认识，接下来我们来加上其他功能。
具体需求：
1.共有4种状态，3分钟切换一次，并循环。
2.待机时或关机时没有动态变化，唤醒或开机后继续。

function setCenterTimer() {
            centerTimer = setInterval(function () {
                if(powerStatic != 2){
                    return  // 判断不是启动态不做后续操作，此时定时器约等于暂停了
                }

                ----下面实现了4种状态，3分钟一切换，循环播放----

                centerTimernum++  // 每次循环计数器+1
                if(centerTimernum%180 == 0){
                    return  // 刚好经过180秒（180的整数倍）时，才继续做状态切换，否则不做后续操作
                }
                let centerFlag = parseInt(centerTimernum/180)  // 判断将要切换到哪个状态
                if(centerFlag%4 == 1){
                    数据A
                }
                if(centerFlag%4 == 2){
                    数据B
                }
                if(centerFlag%4 == 3){
                    数据C
                }
                if(centerFlag%4 == 0){
                    数据D
                }
            },1000)
        }

如果我们用传统释放定时器的方式，那么释放时我们还需记录运行时间，当前状态等。重新创建我们还需要把记录的值传递进去，不甚繁琐。

以上两个例子就是本次思想的精髓，之后准备二次封装一个新的定时器，敬请期待
做完了：数据驱动二次封装定时器工具类
球球你们看完点个赞吧。