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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
本地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
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript基础教程之数组 array
2015/01/18 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python中如何获取类属性的列表
2016/12/26 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python验证身份证信息实例代码
2019/05/06 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
什么是serialVersionUID
2016/03/04 面试题
产品销售员岗位职责
2013/12/18 职场文书
运动会广播稿50字
2014/01/26 职场文书
委托公证书
2014/04/08 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
工程项目合作意向书
2015/05/08 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP