webapp 慎用setInterval、setTimeout
其实这片文章刚开始我啥也没写的,但也有20多的访问量,所以觉得大家还是比较关注这个问题,所以找机会写下。
问题的引出:
为什么我说的时webapp中慎用setInterval、setTimeout, 既然这么说肯定时要强调两点:
1、 webapp 下, 这里的webapp我主要想说的时单页应用(SPA)
2、 慎用, 慎用说明还是可以用的,但要注意。
一、 我们知道 setInterval、setTimeout 时基于 window下的。 看截图
而SPA项目又有一个特别的地方就是切换页面时,整个页面时不会重新刷新的,以 setInterval 为例,最常见的就是 登入页面60s短信验证码。当你在60s之内你已经完成登入操作了,并且跳转到别的页面,而因为时spa项目,window是不会刷新的,所以即使你跳转到别的页面,你的 setInterval 还在运行, 就算你代码中 用了clearInterval,但也是要60s 之后才会去清除,而此时你早已经登入成功去做别的了, 当你设置的时间过多,或者你的项目中使用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 慎用setInterval、setTimeout的更多相关文章
- setInterval setTimeout 详解
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
- requestAnimationFrame与setInterval,setTimeout
自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...
- js计时器方法 setInterval(),setTimeout()
window.setInterval() 周期性地调用一个函数(function)或者执行一段代码. var intervalID = window.setInterval(func, delay[, ...
- setInterval setTimeout clearInterval
setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...
- setInterval && setTimeout || 定时器
来自w3school的解释 定时器setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterva ...
- setInterval(),setTimeout(),location.reload(true)
1,setInterval() setInterval()方法可以按照指定的周期来调用函数或表达式,他会不停地调用函数,直到调用clearInterval()方法或窗口关闭.由setInterval( ...
- setInterval/setTimeout传参方法
网上文章说有3种方法,对于我来说一种方法就够了: <script> var user_name='离间计' //定时器 异步运行 function hello(name){ alert(n ...
- 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- Javascript 的定时器 setInterval,setTimeout,clearInterval
今天开通博客.来1个.哇哈哈哈~~ 今天本来想复习BOM的看到定时器也算DOM一种 ?(是这样吗).分享一下 参考源于:八神吻你 http://www.cnblogs.com/lmfeng/archi ...
随机推荐
- 检查ftp备份数据完整性及短信告警的shell脚本
发布:thebaby 来源:net [大 中 小] 检查ftp备份数据完整性及短信告警的shell,有需要的朋友可以参考下. 该脚本实现如下的功能: 对远程备份到ftp服务器的数据完整性及 ...
- 防止apche列出目录以及下载文件
1.修改httpd.conf,将override none改为override all 2.在需要设置权限的目录上传.htaccess文件,.htaccess文件内容如下: <FilesMatc ...
- C语言中输入输出格式控制
1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...
- phpstorm配置Xdebug进行调试PHP教程
运行环境: PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 xdebug版本:php_xdebug-2.2.5-5.6-vc11-x86_64.dll ps : php版本和xdeb ...
- TDirectory.GetLastAccessTime获取指定目录最后访问时间
使用函数: System.IOUtils.TDirectory.GetLastAccessTime 函数定义: class function GetLastAccessTime(const Path: ...
- TDirectory.GetFileSystemEntries获取指定目录下的目录和文件
使用函数: System.IOUtils.TDirectory.GetFileSystemEntries 所有重载: class function GetFileSystemEntries(const ...
- u-boot Makefile整体解析
一.概述 1.理解u-boot的makefile需要的准备 linux常用命令.shell脚本基础知识.makefile脚本基础知识 2.Makefile的元素 万变不离其宗,无论工程多么复杂,文 ...
- asp.net mvc 发送邮箱验证码
public ActionResult Index() { /*第一种,利用Google的smtp来发送邮件*/ SmtpClient client = ); Random Rdm = new Ran ...
- Swift 中的静态方法继承
Base and Derived Classes: class BaseClass{ class func staticMethod(){ println("BaseClass.static ...
- 在html中嵌入markdown
在博客园网页里写markdown的时候, 某些特殊内容想加上自定义的css, 于是用<div class="xxx">包裹起来, 但是发现该<div>中的m ...