webapp 慎用setInterval、setTimeout

时间:2021-12-26 03:37:04

其实这片文章刚开始我啥也没写的,但也有20多的访问量,所以觉得大家还是比较关注这个问题,所以找机会写下。

问题的引出:

为什么我说的时webapp中慎用setInterval、setTimeout, 既然这么说肯定时要强调两点:

 1、 webapp 下, 这里的webapp我主要想说的时单页应用(SPA)

 2、 慎用, 慎用说明还是可以用的,但要注意。

一、 我们知道  setInterval、setTimeout 时基于 window下的。  看截图

  webapp 慎用setInterval、setTimeout

而SPA项目又有一个特别的地方就是切换页面时,整个页面时不会重新刷新的,以 setInterval 为例,最常见的就是 登入页面60s短信验证码。当你在60s之内你已经完成登入操作了,并且跳转到别的页面,而因为时spa项目,window是不会刷新的,所以即使你跳转到别的页面,你的  setInterval  还在运行, 就算你代码中 用了clearInterval,但也是要60s 之后才会去清除,而此时你早已经登入成功去做别的了, 当你设置的时间过多,或者你的项目中使用setInterval、setTimeout过多。 对你手机内存消耗时不可小觑的,会影响用户流畅度。

   webapp 慎用setInterval、setTimeout 

问题解决:

那怎么解决呢: 很简单,就是你跳转页面的时候去主动 clearInterval 一下, 这个时候你就要统一的去管理所有 setTimeout setInterval 生成的timer。

window.app = { timers : [] };

var timer = setInterval(function( )  {console.info('a')}, 1000);

app.timers.push(timer);

var timer1 = setInterval(function( )  {console.info('b')}, 1000);

app.timers.push(timer1);

//当你页面跳转时,统一去 clearInterval, 因为一般做单页的,跳转等函数都是封装的了,你只要在封装的地方加上下面的代码就可以了。

app.timers.forEach(function (item) {
  clearInterval(item);
});

上面的代码都是自己直接 手写的,连编辑器都没用,不确保正常跑起来, 但思路就是这么个意思,这篇文章也主要是讲这么个思路,抛砖引玉之用, 希望能举一反三, 对webapp下的其它全局函数是不是也要注意这个问题呢? 大家可以一起探讨。