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 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php链表用法实例分析
2015/07/09 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
点菜员岗位职责范本
2014/02/14 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
安全责任协议书
2014/04/21 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
效能监察建议书
2014/05/19 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
大班上学期个人总结
2015/02/13 职场文书
活着观后感
2015/06/03 职场文书