让前端飞JavaScript 进阶营前端开发笔记

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)
        }

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

以上两个例子就是本次思想的精髓,之后准备二次封装一个新的定时器,敬请期待
球球你们看完点个赞吧。

上一篇下一篇

猜你喜欢

热点阅读