angularjs定时任务的设置与清除示例


Posted in Javascript onJune 02, 2017

人们似乎常常将AngularJS中的$timeOut()  $interval()函数看做是一个内置的、无须在意的函数。但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的出现问题,或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形。管理好你的$timeOut/$interval定时器的小技巧就是在$destory事件中将它们取消。

和JavaScript中原生的setTimeout()以及setInterval()函数不同,AngularJS中的$timeOut()函数会返回一个promise。和其他的promise一样,你可以绑定$timeOut的resolved和rejected时间。然而更重要的是,你可以通过将这个promise传递给$timeOut.cancel()方法来取消掉潜在的定时器。

设置定时任务,给定时任务起一个名字time_upd,为的是方便清理的时候直接调用名称。

var timeout_upd = $interval($scope.upd_data ,6000);

注意:设置的时候$interval(fn ,time);第一个参数fn 不能写“()”,只能写$scope.方法名称。第二个参数是定时执行的时间间隔,单位为毫秒。

清除定时任务,AngularJS将会在scope中触发$destory事件。这让我们可以有机会来cancel任何潜在的定时器。

$scope.$on('$destroy',function(){ 
    $interval.cancel(timeout_upd); 
  })

我的页面是这种格式的,如下图所示。angularjs在“实时数据监测”这个模块设置了一个定时任务,当我点击菜单栏到别的页面时,默认的这个定时任务还在执行,占用很多资源。所以必须得清除这个定时任务,原生的清除window.clearInterval(timeout_upd);是不管用的,必须用angularjs自带的清除方法,如上代码所示。

angularjs定时任务的设置与清除示例

注意:angularjs中设置了定时任务之后,必须清除定时任务,不然angularjs会在离开这个controller后,仍然会执行这个定时任务。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 #Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 #Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 #Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 #Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 #Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
Vue.js中数据绑定的语法教程
Jun 02 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Laravel find in set排序实例
2019/10/09 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
用python发送微信消息
2020/12/21 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
Linux操作面试题
2012/05/16 面试题
Final类有什么特点
2012/04/25 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
有创意的广告词
2014/03/18 职场文书
员工工作表现评语
2014/04/26 职场文书
班组长安全工作职责
2014/07/15 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2014年路政工作总结
2014/12/10 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年老干部工作总结
2015/04/23 职场文书
爱心捐书倡议书
2015/04/27 职场文书
离婚代理词范文
2015/05/23 职场文书
教师节随笔
2015/08/15 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书