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"],里面有很多不错的文章。
最新文章
- 【专业找水题】状压dp最水题,没有之一
- 关于 Word Splitting 和 IFS 的三个细节
- Java 工具集
- Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never
- CSS3与页面布局学习总结
- Kinect for Windows SDK开发初体验(一)环境配置
- Javascript基础系列之(一)JavaScript语法
- Xamarin.Android提示aapt退出,代码为255
- ArcEngine 获取像元值
- PMP--论文部分
- poj1066Treasure Hunt(线段相交)
- iOS:测试机添加
- md5实现
- 强悍的 CSS 扩展语言 -- Sass
- sqlserver 优化相关
- 断断续续Python看到现在
- @Slf4j注解实现日志输出
- JDK8集合类源码解析 - HashSet
- 对java高级程序员有益的十本书
- zendstudio 设置默认编码 utf-8 gbk
热门文章
- java运行时could not open ........jvm.cfg问题的解决
- unity8个入门代码
- 零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce(转)
- [TenserFlow学习笔记]——安装
- java之静态方法与非静态方法
- nginx编译安装on mac
- Linux设置和查看环境变量的方法 详解
- [Go] 开发 go web 项目,踩到的一些“坑”
- C宏替换优先级
- 未能找到temp\select2.cur的一部分