其实这片文章刚开始我啥也没写的,但也有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的更多相关文章

  1. setInterval setTimeout 详解

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  2. requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...

  3. js计时器方法 setInterval(),setTimeout()

    window.setInterval() 周期性地调用一个函数(function)或者执行一段代码. var intervalID = window.setInterval(func, delay[, ...

  4. setInterval setTimeout clearInterval

    setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...

  5. setInterval && setTimeout || 定时器

    来自w3school的解释 定时器setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterva ...

  6. setInterval(),setTimeout(),location.reload(true)

    1,setInterval() setInterval()方法可以按照指定的周期来调用函数或表达式,他会不停地调用函数,直到调用clearInterval()方法或窗口关闭.由setInterval( ...

  7. setInterval/setTimeout传参方法

    网上文章说有3种方法,对于我来说一种方法就够了: <script> var user_name='离间计' //定时器 异步运行 function hello(name){ alert(n ...

  8. 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...

  9. Javascript 的定时器 setInterval,setTimeout,clearInterval

    今天开通博客.来1个.哇哈哈哈~~ 今天本来想复习BOM的看到定时器也算DOM一种 ?(是这样吗).分享一下 参考源于:八神吻你 http://www.cnblogs.com/lmfeng/archi ...

随机推荐

  1. 检查ftp备份数据完整性及短信告警的shell脚本

    发布:thebaby   来源:net     [大 中 小] 检查ftp备份数据完整性及短信告警的shell,有需要的朋友可以参考下. 该脚本实现如下的功能: 对远程备份到ftp服务器的数据完整性及 ...

  2. 防止apche列出目录以及下载文件

    1.修改httpd.conf,将override none改为override all 2.在需要设置权限的目录上传.htaccess文件,.htaccess文件内容如下: <FilesMatc ...

  3. C语言中输入输出格式控制

    1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...

  4. 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 ...

  5. TDirectory.GetLastAccessTime获取指定目录最后访问时间

    使用函数: System.IOUtils.TDirectory.GetLastAccessTime 函数定义: class function GetLastAccessTime(const Path: ...

  6. TDirectory.GetFileSystemEntries获取指定目录下的目录和文件

    使用函数: System.IOUtils.TDirectory.GetFileSystemEntries 所有重载: class function GetFileSystemEntries(const ...

  7. u-boot Makefile整体解析

    一.概述   1.理解u-boot的makefile需要的准备 linux常用命令.shell脚本基础知识.makefile脚本基础知识 2.Makefile的元素 万变不离其宗,无论工程多么复杂,文 ...

  8. asp.net mvc 发送邮箱验证码

    public ActionResult Index() { /*第一种,利用Google的smtp来发送邮件*/ SmtpClient client = ); Random Rdm = new Ran ...

  9. Swift 中的静态方法继承

    Base and Derived Classes: class BaseClass{ class func staticMethod(){ println("BaseClass.static ...

  10. 在html中嵌入markdown

    在博客园网页里写markdown的时候, 某些特殊内容想加上自定义的css, 于是用<div class="xxx">包裹起来, 但是发现该<div>中的m ...