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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue实现购物车的监听
Apr 20 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php文件上传的简单实例
2013/10/19 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
Javascript window对象详解
2014/11/12 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python操作qml对象过程详解
2019/09/26 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python实现粒子群算法
2020/10/15 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
简单的辞职信模板
2015/05/12 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js