JavaScript数据驱动的定时器开关(可暂停)
2019-02-15 本文已影响13人
苏茶茉芳_亚泽伊
异常编程学
最近做了一个中央空调的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)
}
如果我们用传统释放定时器的方式,那么释放时我们还需记录运行时间,当前状态等。重新创建我们还需要把记录的值传递进去,不甚繁琐。
以上两个例子就是本次思想的精髓,之后准备二次封装一个新的定时器,敬请期待
球球你们看完点个赞吧。