• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Angular.js中定时器循环的3种方法总结

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

作者:fjj1084650208 字体:[增加 减小] 来源:互联网 时间:2017-05-11

fjj1084650208通过本文主要向大家介绍了angular.js视频教程,angular.js,angular.js下载,angular js菜鸟教程,angular.js官网等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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)
});
</div>

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

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

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

总结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Angular.js中定时器循环的3种方法总结
  • 关于angular js_$watch监控属性和对象详解
  • angular.js 路由及页面传参示例
  • Angular JS 生成动态二维码的方法
  • 基于Angular.js实现的触摸滑动动画实例代码
  • Angular.JS实现无限级的联动菜单(使用demo)
  • 浅谈Angular.js中使用$watch监听模型变化
  • Angular下H5上传图片的方法(可多张上传)

相关文章

  • 2017-05-11Three.js获取鼠标点击的三维坐标示例代码
  • 2017-05-11深入理解vue路由的使用
  • 2017-05-11微信小程序模板之分页滑动栏
  • 2017-05-11微信小程序 使用canvas制作K线实例详解
  • 2017-05-11深入对Vue.js $watch方法的理解
  • 2017-05-11javascript实现圣旨卷轴展开效果(代码分享)
  • 2017-05-11windows下vue-cli导入bootstrap样式
  • 2017-05-11Angularjs中使用layDate日期控件示例
  • 2017-05-11BootStrapValidator初使用教程详解
  • 2017-05-11JS中Select下拉列表类(支持输入模糊查询)功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 使用BootStrap进行轮播图的制作
    • 微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
    • js生成随机数方法和实例
    • 利用jquery正则表达式在页面验证url网址输入是否正确
    • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
    • jQuery元素选择器实例代码
    • nodejs爬虫遇到的乱码问题汇总
    • Bootstrap table表格简单操作
    • jQuery获取table下某一行某一列的值实现代码
    • es6的数字处理的方法(5个)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有