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清除定时器的更多相关文章

  1. setTimeout和setInterval实现滚动轮播中,清除定时器的思考

    PS:希望各路大神能够指点 setTimeout(function,time):单位时间内执行一次函数function,以后不执行:对应清除定时器方法为clearTimeout; setInterva ...

  2. vue 如何清除定时器

    在页面中需要定时刷新局部数据,在数据变化是否频繁的情况下,没有必要使用webSocket,因为数据变化频繁,数据实时变化太快看不清楚.因此页面会定时调用后台接口以达到实时刷新数据的效果. 1.在dat ...

  3. swoole 清除定时器提示no timer

    首页确定一个核心概念 clearTimer仅可清除当前进程的定时器 server代码如下: <?php class Server { private $serv; private $timer; ...

  4. 在vue组件中设置定时器和清除定时器

    由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器.但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要 ...

  5. Vue中在组件销毁时清除定时器(setInterval)

    在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...

  6. angular5 清除定时器

    ngOnDestroy 在指令被销毁前,将会调用 ngOnDestory 方法.它主要用于执行一些清理操作,比如:移除事件监听.清除定时器.退订 Observable 等. 调用方法 1. impor ...

  7. 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题

    2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...

  8. vue+js清除定时器

    注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...

  9. vue中清除定时器

    1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...

随机推荐

  1. Oracle之range,hash,list分区现实应用及优缺点汇总

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp51 [align=center;] Oracle之range,hash,l ...

  2. JAVA HashMap的实现原理

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt359 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存 ...

  3. node简单配置一台服务器

    要想使用nodeJS来搭建服务器,首先需要一个必备的条件:node必须安装,建议为4.0版本及以上: 在node中,为我们封装了好多类,搭建服务器需要的一个类是"http"类. 用 ...

  4. 转: 【Java并发编程】之十三:生产者—消费者模型(含代码)

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17249321 生产者消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一 ...

  5. 201521123084 《Java程序设计》第4周学习总结

    第4周作业-面向对象设计与继承 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 总结: (1)学会了如何给类和方法进行简单的注释: (2)学 ...

  6. 测试与发布(Alpha版本)

    [Alpha阶段]测试报告 1.测试找出的BUG (1).这种情况刷新就好 (2).文件必须10个才行,多余10个的部分不会进入查重的部分,少于会出错: (3).文件保存在d:\files,由于有些原 ...

  7. 201521123048《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...

  8. 201521123031《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...

  9. 201521123033《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  10. JAVA课程设计--简易计算器(201521123022 黄俊麟)

    1.团队课程设计博客链接 http://www.cnblogs.com/I-love-java/p/7058752.html 2.个人负责模板或任务说明 1.初始化业务逻辑. 2.开方.正负.清零.退 ...