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


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS定时器的使用与移除操作方法。分享给大家供大家参考,具体如下:

1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟。

$timeout //实现的是延迟执行
$interval //实现的是定时器的效果

我们分别来看这两个服务

(1)timeout

timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象。

var timer=$timeout(function(){
   console.log('hello world')
},2000);  //该函数延迟2秒执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

(2)interval

interval与timeout服务大同小异,创建定时器返回的也是一个promise对象。

var timer=$interval(function(){
   console.log('hello world')
},2000);  //间隔2秒定时执行
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};

2.如何移除定时器

在angularJSo中,特别是在页面切换或者说是路由切换的时候,我们需要移除响应的定时器,我们可以通过on方法,监听路由切换时间。当DOM结构发生变化时,会执行on方法:

$scope.$on('destroy',function(){
  $interval.cancel($scope.timer);
}) //在控制器里,添加$on函数

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
js控制div弹出层实现方法
May 11 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
You might like
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
jQuery之ajax删除详解
2014/02/27 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
利用Python循环(包括while&for)各种打印九九乘法表的实例
2017/11/06 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
C++的几个面试题附答案
2016/08/03 面试题
软件测试英文面试题
2012/10/14 面试题
生产班组长岗位职责
2014/01/05 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
自查自纠整改报告
2014/11/06 职场文书
创先争优活动个人总结
2015/03/04 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA