H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】JS setInterval 定时器导致页面卡死

使用场景

N多年前,leader让做一个网页,给了一个设计png,content部分分好几块,然后这几块内容里面的数据不停的来回切换,当时第一反应就是setInterval 循环播放,一个网页大概半天时间就做好了,成品跟设计png几乎一模一样,很满意,打包发给了leader。
然而,过了几天,leader说你做的网页为什么过了会,点什么都没反应,你去看看怎么回事。当时就觉得奇怪,我本地运行的好好的,没有任何异常,也没他说的卡死啊,然后就网上各种搜索,看看问题到底出在哪里。后来只记得当时的产物是
`window.setInterval(() => {

setTimeout(fun, 0)

}, 30000)`

并不知道为什么要这样做,只知道这样写了以后,网页不会再卡死。当时也没有去研究到底为什么。依稀记得当时也网上搜索了,没有找到答案。

后续

后面工作很多年,只要使用到循环就一直按照这种写法,没有遇到过卡死的问题,有次听公开课的时候,问了下老师,为什么要这样写,老师只说这样写性能好,并没有说为什么。

今天刚好看同事代码,告诉她循环不建议那么写,我给你找个比较好的写法,我自己也说不上来为什么要这样写,既然疑惑这么多年,今天刚好有空,我来查查为什么。

网上的说明 setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页
其原因与JS引擎线程有关(又得研究下JS引擎线程了) 但是setTimeout是自带清除定时器的

参考 https://blog.csdn.net/helenwe…

另外搜索到一些弊端
弊端1:setInterval会无视错误代码,即使代码报错,还是会一直执行下去。

弊端2:setInterval会无视网络延迟,很多人会有需求需要1秒更新一次数据,然后就有可能会定时发送请求给服务器请求,假如服务器请求数据发生延迟等等情况的时候,setInterval不会等到请求数据完之后才去去执行下一次请求,他会在当你发生第一次请求的时候就已经开始计时,并且无论有没有请求完成,只有时间一到下一秒的时候,就会再次发送请求。很容造成请求堵塞,或者渲染堵塞,严重的会之间卡死。

注:vue 项目的时候,如果页面使用到循环定时器,调用后台接口出现异常,在切换路由地时候并不能清除定时器。(目前我测试出来,是这样的)
` beforeRouteLeave(to, from, next) {

console.log('beforeRouteLeave')
this.clearTimer()
next() //一定不要忘记写

}`

弊端3:很多时候越跑越快的问题。

解决方案:使用setTimeout和递归(自我调用)

例如:

使用 setInterval 方案(不推荐使用)

`setInterval(function(){

console.log('做点什么吧')

},1000)`
使用 setTimeout 方案 (推荐使用,完美代替setInterval) 注:有待验证

`var demo = function(){

console.log('做点什么吧')
setTimeout(demo, 1000)       

}`

本文地址:H5W3 » 【JS】JS setInterval 定时器导致页面卡死

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址