异常编程学
最近做了一个中央空调的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)
}
如果我们用传统释放定时器的方式，那么释放时我们还需记录运行时间，当前状态等。重新创建我们还需要把记录的值传递进去，不甚繁琐。
以上两个例子就是本次思想的精髓，之后准备二次封装一个新的定时器，敬请期待
球球你们看完点个赞吧。
网友评论