首页 > 编程 > JavaScript > 正文

Angular.js中定时器循环的3种方法总结

2019-11-19 16:43:08
字体:
来源:转载
供稿:网友

本文主要设计定时器的三种循环,模板自配,下面分享给大家供大家参考,具体如下:

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();})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对武林网的支持。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表