AngularJS中$timeout和$interval的用法详解
1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller('controllerCtrl', ['app', '$scope','$http','$routeParams','$filter','$location','$interval','$timeout',
function (app, $scope,$http,$routeParams,$filter,$location,$interval,$timeout) {
2.在需要用的地方写上该方法 例如 $scope.timer = $interval( function(){
$scope.backup("1");
}, 10000);
一开始以为是把需要调用的方法直接写在function(){}的位置,发现方法走到定时器时直接执行了该方法并没有循环执行,后来发现需要把需要调用的方法写在function内,10000表示10秒循环一次.如果要定义循环次数 只需要写成如下这样 $scope.timer = $interval( function(){
$scope.backup("1");
}, 10000,3); 3代表循环3次就自动停止循环了.
3.终止定时器 $interval.cancel($scope.timer);
4.$timeout的用法也类似 ,只是$timeout是延迟多少秒后循环一次,而$interval是每隔多少秒循环一次,如果不终止就一直循环
下面是摘自博客 比较高大上的介绍
interval
window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。
间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔,调用$intreval.cancel(promise)。
备注:当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。
使用:$interval(fn,delay,[count],[invokeApply],[Pass]);
fn:一个将被反复执行的函数。
delay:每次调用的间隔毫秒数值。
count:循环次数的数值,如果没设置,则无限制循环。
invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。
Pass:函数的附加参数。
方法:
cancel(promise);
取消与承诺相关联的任务。
promise:$interval函数的返回值。
使用代码:

(function () {
angular.module("Demo", [])
.controller("testCtrl",["$interval",testCtrl]);
function testCtrl($interval){
var toDo = function () {
console.log("Hello World");
};
$interval(toDo, 3000, 10);
};
}());

$timeout
window.setTimeout的Angular包装形式。Fn函数包装成一个try/catch块,代表$exceptionHandler服务里的任何异常。
timeout函数的返回值是一个promise,当到达设置的超时时间时,这个承诺将被解决,并执行timeout函数。
需要取消timeout,需要调用$timeout.cancel(promise);
使用: $timeout(fn,[delay],[invokeApply]);
fn:一个将被延迟执行的函数。
delay:延迟的时间(毫秒)。
invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply。
方法:
cancel(promise);
取消与承诺相关联的任务。这个的结果是,承诺将被以摒弃方式来解决。
promise:$timeout函数返回的承诺。

(function () {
angular.module("Demo", [])
.controller("testCtrl",["$timeout",testCtrl]);
function testCtrl($timeout){
var toDo = function () {
console.log("Hello World");
};
$timeout(toDo,5000)
};
}());

大致使用方法可以和原生js的setInterval和setTimeout那样使用,一些使用小技巧可以用在浏览器单线程的事件执行方面... 详情推荐看破狼的文章“JavaScript单线程和浏览器事件循环简述”,也可以关注其微信公众号["shuang_lang_shuo"],里面有很多不错的文章。
AngularJS中$timeout和$interval的用法详解的更多相关文章
- [转]AngularJS中$timeout和$interval的用法详解
本文转自:http://www.cnblogs.com/moli-/p/5827618.html 1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.co ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
- Java语言Socket接口用法详解
Socket接口用法详解 在Java中,基于TCP协议实现网络通信的类有两个,在客户端的Socket类和在服务器端的ServerSocket类,ServerSocket类的功能是建立一个Serve ...
- oracle数据库定时任务dbms_job的用法详解
本文来源:Ruthless <oracle数据库定时任务dbms_job的用法详解> 一.dbms_job涉及到的知识点 1.创建job: variable jobno number; ...
- [转]使用python来操作redis用法详解
转自:使用python来操作redis用法详解 class CommRedisBase(): def __init__(self): REDIS_CONF = {} connection_pool = ...
- Linux Shell脚本入门--wget 命令用法详解
Linux Shell脚本入门--wget 命令用法详解 wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能 ...
- 【python】redis基本命令和基本用法详解
[python]redis基本命令和基本用法详解 来自http://www.cnblogs.com/wangtp/p/5636872.html 1.redis连接 redis-py提供两个类Redis ...
- (转)linux traceroute命令参数及用法详解--linux跟踪路由命令
linux traceroute命令参数及用法详解--linux跟踪路由命令 原文:http://blog.csdn.net/liyuan_669/article/details/25362505 通 ...
随机推荐
- 阿里P6大牛给予Java初学者的学习路线建议
Java学习这一部分是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个阶段要 ...
- jQuery File Upload 判断图片尺寸,限定图片宽高的办法
1.必须熟读jQuery File Upload 文档,在add方法中进行判断,如果不符合条件,就用 data.abort()方法取消上传动作. $("file").fileupl ...
- SSH三大框架的原理和核心(转)
一.Struts2的工作流程:1.用户在客户端发起请求,客户端会初始化一个servlet容器请求:2.servlet容器把请求会传递给context容器,context容器找到目标web工程.3.进行 ...
- Golang 实现 set 集合,变相实现 切片去重、排序 功能
Java 中的集合(set)去重很方便,PHP 中的数组值去重,就更加方便,一个函数搞定:array_unique(),Golang 中就比较苦逼了,官方没有提供对“切片去重”的功能,而项目中,又经常 ...
- 每次运行caffe代码之前需要考虑修改的地方
Train阶段: (1) train.sh中的solver.prototxt路径 (2) train.sh中的caffemodel路径 (3) train.sh中的 ...
- wxParse解析富文本内容使点击图片可以选中并实现放大缩小
wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...
- 小程序canvas的一个坑
很奇怪,原来好好的,结果现在显示乱了,模拟器和手机都不一样.模拟器上,整个canvas都往右偏移了,手机上,右侧有一大片空白. 反复试验,发现问题是:page的对齐方式是center引起的,改为lef ...
- 学习Spring-Session+Redis实现session共享
1.添加依赖 <dependency> <groupId>org.springframework.session</groupId> <artifactId& ...
- mod_wsgi的工作模式和配置
Openstack所有提供API接口的服务都是python web server,而其本身性能很弱,目前已经将它们配置到了apache上.但对于如何设置mod_wsgi的参数,我一直没有好好去阅读其文 ...
- angularjs使用ui-router切换视图, 自动滚动到顶部
ui-view Examples for autoscroll: <ui-view autoscroll/> <!-- If autoscroll present with no e ...