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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
原生JS进行前后端同构
Apr 22 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
js回调函数原理与用法案例分析
Mar 04 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
法律七进实施方案
2014/03/15 职场文书
企业承诺书格式
2014/05/21 职场文书
党员自我对照检查材料
2014/08/19 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
讲座新闻稿
2015/07/18 职场文书
python中if和elif的区别介绍
2021/11/07 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
mysql幻读详解实例以及解决办法
2022/06/16 MySQL