首页/ 填坑/ 文章详情

Javascript 定时器应用技巧讲解

Javascript有两个定时器函数,分别是setTimeout和setInterval,区别定时执行一次与无数次,常使用的场景于倒计时,一分一秒的跳动的数字,刺激着用户的反应神经,活跃在商品抢购、秒杀等环节,组成现代网购不可缺少用户互动。

定时器触发时间数字1000兑换现实时间的1秒,单纯使用setinterval进行倒计时,往往发现时间未到,提前触发下一步。反复观察,页面长时间停留,定时器触发的频率变快。可以得出结论:定时器的触发时间间隔不是恒定的

对于商业上需要精确的秒的活动,不能依靠定时器自身时间间隔,需要实时判断当前的时间做比较。

JSvar endTime = new Date('2022/2/15 12:00').getTime();
var timer = setInterval(function(){
    var nowTime = new Date().getTime();
    if(nowTime >= endTime) {
        clearInterval(timer);
        console.log('倒计时已结束')
    } else {
        console.log('倒计时进行中...')
    }
},1000)

由于定时器触发间隔「不守规则」,容易造成时间逆差。老实人苦守着抢购按钮尚未激活,活动的商品早给别人抢先一步秒完,自己抢了个寂寞。

移动端使用定时器倒计时,需要注意息屏场景。手机长时间不操作,自动息屏,定时器进入后台停止执行。再次进入页面,定时器激活,不过倒计时的显示的时分秒变得异常。这时需要中止定时器,再次激活定器。

JSclearInterval(timer);

直接使用clearInterval中止定时器,有一定机率中止失败

JSvar timer = null;
var stuats = true;
var endTime = new Date('2022/2/15 12:00').getTime();

/**
 * 执行定时器
 * method playTimer
 */
var playTimer = function() {
    timer = setInterval(function(){
        if(stuats == false) { //防止清除定时器失效
            clearInterval(timer);
            return false;
        }

        var nowTime = new Date().getTime();
        if(nowTime >= endTime) {
            clearInterval(timer);
            console.log('倒计时已结束')
        } else {
            console.log('倒计时进行中...')
        }
    },1000)
}


/**
 * 重设定时器
 * method resetTimer
 */
var resetTimer= function() {
    stuats = false;
    setTimeout(function(){ //延迟执行中止,防止执行失败
        clearInterval(timer);
        stuats = true;
        playTimer()
    },1000);
}


playTimer();

移动端通过监听visibilitychange事件,判断document.visibilityState的值为visible进行重设定时器。

JSdocument.addEventListener('visibilitychange',function() {
    if(document.visibilityState == 'hidden') {
        return false;
    }
    
    resetTimer(); 
});

※ 使用到定时器,要多观察定时进程,避免开启多重定时器任务。

文章评论1 records

最新 最早
rantrism
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
来自Chrome Windows 10 2023-04-03 11:27 回复
rantrism

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!