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 相关文章推荐
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
Three.js学习之网格
Aug 10 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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代码质量36计
2012/09/05 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python简单实现计算过期时间的方法
2015/06/09 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
个人工作主要事迹
2014/05/08 职场文书
教师演讲稿开场白
2014/08/25 职场文书
孩子教育的心得体会
2014/09/01 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
村主任当选感言
2015/08/01 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android