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模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
vue+elementUI实现简单日历功能
Sep 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
php5 mysql分页实例代码
2008/04/10 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python的正则表达式re模块的常用方法
2013/03/09 Python
python实现问号表达式(?)的方法
2013/11/27 Python
Python+django实现简单的文件上传
2016/08/17 Python
python 系统调用的实例详解
2017/07/11 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
品牌推广策划方案
2014/05/28 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
工程主管竞聘书
2015/09/15 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书