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据option的value值快速设定初始的selected选项
Aug 13 Javascript
js 操作css实现代码
Jun 11 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
iframe实用操作锦集
Apr 22 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
node+express制作爬虫教程
Nov 11 Javascript
关于vue-router路径计算问题
May 10 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
动态加载iframe
2006/06/16 Javascript
js变量作用域及可访问性的探讨
2006/11/23 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
详解angular element()方法使用
2017/04/08 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
一分钟演讲稿
2014/04/30 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
奖学金个人总结
2015/03/04 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
护士2015年终工作总结
2015/04/29 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书