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后，仍然会执行这个定时任务。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实现页面定时刷新

    有时我们在前端可能会有这样的需求: 1.每隔一段时间刷新一下页面中的数据 2.根据需要可以暂停和启用刷新 接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现. $interval使用方法: 1.启动一个定时任务 $interval(function(){},n1,n2); 第一个参数function是指我们的定时任务要触发的事件, 第二个参数n1是指每隔多少毫秒触发

  • AngularJS定时器的使用与移除操作方法【interval与timeout】

    本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var

  • AngularJs定时器$interval 和 $timeout详解

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候

  • angularjs定时任务的设置与清除示例

    angularjs定时任务的设置与清除示例

    人们似乎常常将AngularJS中的$timeOut()  $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的出现问题,或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形.管理好你的$timeOut/$interval定时器的小技巧就是在$destory事件中将它们取消. 和JavaScript中原生的setTimeout()以

  • Python使用crontab模块设置和清除定时任务操作详解

    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远程连接设置的实现示例

    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

随机推荐