AngualrJs清除定时器遇到的坑

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清除定时器遇到的坑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS定时器的使用与移除操作方法【interval与timeout】

    本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var

  • AngularJs定时器$interval 和 $timeout详解

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候

  • AngualrJs清除定时器遇到的坑

    angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器 var timer = setInterval(function(){ $scope.$apply(function(){ //这里是想要定

  • 详解小程序退出页面时清除定时器

    详解小程序退出页面时清除定时器

    由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除 但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中 比如:Loadingtime是一个定时器,在data中定义Loadingtime:''. 然后在time方法中使用 在onUnload监听页面卸载生命周期函数中清除 如此在退出该页面时,就可以清除该定时器了 以上所述是小编给大家介绍的小程序退出页面时清除定时器详解整合,希望对大家有所帮助,如果大家有任何

  • angular2组件中定时刷新并清除定时器的实例讲解

    实例如下: import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush }) export class xxxComponent{ private timer; constructor(private ref : ChangeD

  • Vue清除定时器setInterval优化方案分享

    两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = (() => { // 某些操作 }, 1000) 最后在beforeDestroy()生命周期内清除定时器: beforeDestroy() { clearInterval(this.timer); this.timer = null; } 方案1有

  • Vue如何优雅的清除定时器

    目录 前言 优化 衍生问题:beforeDestroy 没有触发? 前言 清除定时器,相信有相当一部分人是这么写的: export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer) } } 这是一段常见的代

  • React-Hook中使用useEffect清除定时器的实现方法

    React-Hook中使用useEffect清除定时器的实现方法

    目录 useEffect useEffect清除定时器 最后 useEffect 之前我们学习了class组件的声明周期,那么我们想在函数式组件中做一些声明周期有关操作能否实现呢?函数式组件中是没有生命周期的,所以就可以使用useEffect来替代.我们可以把useEffect看作组件加载.组件更新.组件卸载的三个生命周期方法的组合. 下面我们一起来通过案例学习useEffect的使用:1.这里需求是写一个点击事件让state累加,并且吧state展示在title上2.首先要导入React, {

  • VUE设置和清除定时器的方式及遇到的问题

    目录 方法一.在生命周期函数beforeDestroy中清除 方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案 附:vue离开页面销毁定时器 总结 方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l

  • JS中2种定时器的使用及清除的实现

    目录 一.什么是定时器? 二.定时器的分类 1.一次性定时器: 2.周期性定时器: 三.清除定时器 一.什么是定时器? 定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码. 二.定时器的分类 1.一次性定时器: setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段 使用方法:var timer=setTimeout(fun,毫秒数) 清除的方法:clearTimeout(timeoutId) //一次性 var timeoutId = window.setTime

  • Vue.js 踩坑记之双向绑定

    这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v

  • vue setInterval 定时器失效的解决方式

    正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave 补充知识:vue中使用定时器的坑 我们在使用vue的脚手架去搭建开发环境的时候,在A页面写入一个定时器去定时请求一个接口,但是我们去B页面,C页面的时候都会有这个接口定时请求的现象,那么怎样处理呢? 第一步: 首先我在data函数里面进行定义定时器名

随机推荐