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执行效率全面总结
Nov 04 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
详解JavaScript原型与原型链
Nov 16 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实现的MySQL数据浏览器
2007/03/11 PHP
也谈php网站在线人数统计
2008/04/09 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python环境变量设置方法
2016/08/28 Python
python爬虫之百度API调用方法
2017/06/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
请说出几个常用的异常类
2013/01/08 面试题
责任心演讲稿
2014/05/14 职场文书
党员服务承诺书
2014/05/28 职场文书
金融管理专业求职信
2014/07/10 职场文书
合同意向书范本
2014/07/30 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python