JS数据驱动的定时器开关(可暂停)

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容