循环执行setinterval导致页面卡顿

现在项目里增加一个新功能就是给每个轮播加倒计时,倒计时结束以后才能执行某些事件.
可供选择的有两个:

setTimeout(function(){
},0) //多少时间以后执行一次(只执行一次)
setInterval(()=>{
},0)//每各多少时间执行一次。(根据时间重复执行)

根据项目要求很明显用第一个,但是出现了问题,首先是页面初加载时候执行一次倒计时,然后根据每次滑动进行每个模板倒计时。
滑动时候要将现在的倒计时给停止

//创建定时器
startCountdown:function(){
this.timer = setInterval(() => {
   .....//执行相应的操作
}, 1000); // 每1000毫秒(1秒)执行一次
},
//滑动销毁
chang:function(){
 clearInterval(this.timer)
},

刚开始还觉得没啥问题倒是随着滑动次数的越来越多导致了页面越来越卡顿。
后来发现因为js是单线程。
解决办法就是销毁setInterval:

startCountdown:function(){
this.timer = setInterval(() => {
setInterval(()=>{
},0) 
   .....//执行相应的操作
}, 1000); // 每1000毫秒(1秒)执行一次
},

因为setInterval是执行完以后销毁定时器。
参考:https://segmentfault.com/a/1190000038886919

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值