AngualrJs清除定时器遇到的坑


Posted in Javascript onOctober 13, 2017

angualrJs清除定时器爬坑之路:

今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能。

我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器

var timer = setInterval(function(){
          $scope.$apply(function(){
            //这里是想要定时刷新的逻辑
          });
        },3000);
        $scope.$on('$destroy',function(){
          if (timer) {
            clearInterval(timer);
            timer = null;
          }
        });

 这里说一下,因为我用的是javascript中原生的setTimeout()以及setInterval()函数,所以清除时对应是clearTimeout()clearInterval(),angular定时器是$timeOut$interval,所以清除对应是$timeOut.cancel()$interval.cancel(),

必须一一对应,不一致是不会清除掉的。

总结

以上所述是小编给大家介绍的AngualrJs清除定时器遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
angularjs http与后台交互的实现示例
Dec 21 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
node使用request请求的方法
Dec 20 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
React Native中Navigator的使用方法示例
Oct 13 #Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 #Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 #Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
解决ie img标签内存泄漏的问题
Oct 13 #Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
You might like
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
ext实现完整的登录代码
2008/08/08 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
Angular排序实例详解
2017/06/28 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Pygame框架实现飞机大战
2020/08/07 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
酒店节能减排方案
2014/05/26 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
基于Golang 高并发问题的解决方案
2021/05/08 Golang
使用springMVC所需要的pom配置
2021/09/15 Java/Android
python微信智能AI机器人实现多种支付方式
2022/04/12 Python