Angular.js中定时器循环的3种方法
来源:爱站网时间:2019-12-14编辑:网友分享
很多初学者对于Angular.js中定时器循环不理解,别着急,今天爱站技术频道带大家一起来分析Angular.js中定时器循环的3种方法,希望对你学习这方面知识有所帮助。
很多初学者对于Angular.js中定时器循环不理解,别着急,今天爱站技术频道带大家一起来分析Angular.js中定时器循环的3种方法,希望对你学习这方面知识有所帮助。
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(); })
以上就是爱站技术频道小编所理解的Angular.js中定时器循环的3种方法,希望大家有什么疑问或见解可以放在评论栏,小编会尽快回复。