webapp开发:慎用setInterval、setTimeout
安安 2017-10-10 来源 :网络 阅读 1395 评论 0

摘要:本篇WEBAPP开发教程将为大家讲解WEBAPP编程的知识点,看完这篇文章会让你对WEBAPP编程的知识点有更加清晰的理解和运用。

本篇WEBAPP开发教程将为大家讲解WEBAPP编程的知识点,看完这篇文章会让你对WEBAPP编程的知识点有更加清晰的理解和运用。

 

其实这片文章刚开始我啥也没写的,但也有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下的其它全局函数是不是也要注意这个问题呢? 大家可以一起探讨。


希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标WEBAPP频道都能找到!

本文由 @安安 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程