angularjs定时任务的设置与清除示例
人们似乎常常将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会在离开这个controller后,仍然会执行这个定时任务。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
AngularJS实现页面定时刷新
有时我们在前端可能会有这样的需求: 1.每隔一段时间刷新一下页面中的数据 2.根据需要可以暂停和启用刷新 接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现. $interval使用方法: 1.启动一个定时任务 $interval(function(){},n1,n2); 第一个参数function是指我们的定时任务要触发的事件, 第二个参数n1是指每隔多少毫秒触发
-
AngularJs定时器$interval 和 $timeout详解
$interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候
-
AngularJS定时器的使用与移除操作方法【interval与timeout】
本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var
-
angularjs定时任务的设置与清除示例
人们似乎常常将AngularJS中的$timeOut() $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的出现问题,或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形.管理好你的$timeOut/$interval定时器的小技巧就是在$destory事件中将它们取消. 和JavaScript中原生的setTimeout()以
-
Python使用crontab模块设置和清除定时任务操作详解
本文实例讲述了Python使用crontab模块设置和清除定时任务操作.分享给大家供大家参考,具体如下: centos7下安装Python的pip root用户使用yum install -y python-pip 时会报如下错误: No package python-pip available Error:Nothing to do 解决方法如下: 首先安装epel扩展源: yum -y install epel-release 更新完成之后,就可安装pip: yum -y install p
-
Linux定时任务的设置及 crontab 配置指南
为当前用户创建cron服务 1. 键入 crontab -e 编辑crontab服务文件 例如 文件内容如下: */2 * * * * /bin/sh /home/admin/jiaoben/buy/deleteFile.sh 保存文件并并退出 */2 * * * * /bin/sh /home/admin/jiaoben/buy/deleteFile.sh */2 * * * * 通过这段字段可以设定什么时候执行脚本 /bin/sh /home/admin/jiaoben/buy/dele
-
关于Angularjs中跨域设置白名单问题
在config中注入$sceDelegateProvider服务使用resourceUrlWhitelist([])方法添加白名单 跨域时将method的属性设置为"jsonp"就可以访问了 app.config(["$sceDelegateProvider",function($sceDelegateProvider){ $sceDelegateProvider.resourceUrlWhitelist([ <span style="white-s
-
angularJs中ng-model-options设置数据同步的方法
后台请求任务量很大的时候,可以设置同步的时间和操作, 利用ng-model-options来实现,提高网站性能. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <
-
使用C#调用百度地图并实现坐标点的设置以及读取示例
申请百度地图密钥以及查看百度API 网址:http://lbsyun.baidu.com/apiconsole/key#/home 网址:http://lbsyun.baidu.com/jsdemo.htm#c1_3 程序实现功能: 1.输入网址那可以调用本地的html文件,也可以访问其他网站 2.输入坐标.添加坐标按钮,可以将坐标值传入html文件中,显示在经纬度的文本框中 3.定位按钮可以将地图重新定位,定位中心是文本框内的经纬度 4.添加标注点是将文本框内的经纬度添加坐标到地图 5.删除标
-
Docker远程连接设置的实现示例
目录 环境信息 设置 Ubuntu上的设置 开启Docker远程连接后,在开发和学习时都能带来便利,但请不要将此方式用在外部网络环境,以免带来安全问题,下图是官方警告: 环境信息 本次实战先在CentOS上的Docker设置,再在Ubuntu上也设置,首先要实战的CentOS环境信息如下: 操作系统:CentOS Linux release 7.6.1810 Docker:1.13.1, build b2f74b2/1.13.1 设置 1.编辑此文件:/lib/systemd/system/do
-
Python docx库删除复制paragraph及行高设置图片插入示例
目录 引言 1.复制paragraph 2.删除paragraph 3.插入图片和paragraph行高设置 引言 这两天做一个python小工具,用到了docx库,涉及到paragraph的删除.,还有行高设置等技术,这里做一下记录. 1.复制paragraph 即用来原文档的加粗.斜体,下划线,颜色等属性的,官方没有提供paragraph的接口,只能自己实现: # paragraph 的 def get_para_data(output_doc_name, paragraph): "&quo
-
本地存储localStorage设置过期时间示例详解
目录 思考 实现思路 代码实现 代码测试 思考 在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期.如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案. 实现思路 在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可. 代码实现 目录结构 en
-
VUE设置和清除定时器的方式及遇到的问题
目录 方法一.在生命周期函数beforeDestroy中清除 方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案 附:vue离开页面销毁定时器 总结 方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l
随机推荐
- Python中字典和JSON互转操作实例
- ASP在ACCESS中模糊查询"内存溢出"的解决方法
- jQuery实现拖动效果的实例代码
- Apache 虚拟目录和默认首页的设置
- Javascript 浮点运算的问题分析与解决方法
- Jquery遍历Json数据的方法
- Python 备份程序代码实现
- Android如何为按键添加声音
- 分享Android微信红包插件
- 解析使用ThinkPHP应该掌握的调试手段
- JSP与JS交互问题 值传递
- 超炫的jquery仿flash导航栏特效
- CascadeView级联组件实现思路详解(分离思想和单链表)
- Java Lambda表达式详解和实例
- springMVC发送邮件的简单实现
- myeclipse智能提示设置的实现方法
- 模仿OSO的论坛(三)
- thinkphp普通查询与表达式查询实例分析
- Vue 源码分析之 Observer实现过程
- 使用keras做SQL注入攻击的判断(实例讲解)