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


Posted in Javascript onApril 27, 2017

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

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

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 

总结

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

Javascript 相关文章推荐
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
浅析python内置模块collections
2019/11/15 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python random模块的使用示例
2020/10/10 Python
python 实现批量图片识别并翻译
2020/11/02 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
2014年医学生毕业自我鉴定
2014/03/26 职场文书
铁路安全事故反思
2014/04/26 职场文书
中文专业求职信
2014/06/20 职场文书
保险公司演讲稿
2014/09/02 职场文书
法制主题班会教案
2015/08/13 职场文书