angularjs中循环定时器的三种方法
2016-05-05 14:34
555 查看
本文主要设计定时器的三种循环,模板自配
1、$interlval实现,比较简单和原生js的setInterval比较相似
2、$timeout的递归调用来实现
3、$timeout借助arguments.callee来实现
1、$interlval实现,比较简单和原生js的setInterval比较相似
var app = angular.module('myApp',[]);
app.run(function($rootScope , $interval){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"] var i = 0; var timer = $interval(function(){ if(i >= img.length){ i = 0; } $rootScope.imgSrc = img[i++]; },1000) });
2、$timeout的递归调用来实现
app.run(function($rootScope,$timeout){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"] var i = 0; $rootScope.c = 0; var loop = function(){ $timeout(function(){ if(i >= img.length){ i = 0; } $rootScope.imgSrc=img[i++]; loop(); $rootScope.c += 1; },2000) }; loop(); })
3、$timeout借助arguments.callee来实现
app.run(function($rootScope,$timeout){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg" ,"http://ww2.sinaimg.cn/crop.0.0.1080.1080.1024/d773ebfajw8eum57eobkwj20u00u075w.jpg","http://h.hiphotos.baidu.com/zhidao/pic/item/3812b31bb051f81991b9d8dbdcb44aed2f73e787.jpg"] var i = 0; $rootScope.c = 0; var loop = function(){ $timeout(function(){ if(i >= img.length){ i = 0; } $rootScope.imgSrc=img[i++]; loop(); $rootScope.c += 1; },2000) }; loop(); })
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享