Angular.js中定時器循環(huán)的3種方法總結(jié)
更新時間：2017年04月27日 10:53:20 作者：fjj1084650208
這篇文章主要給大家總結(jié)了angular.js中定時器循環(huán)的3種方法，分別是利用$interlval實現(xiàn)、$timeout的遞歸調(diào)用來實現(xiàn)以及$timeout借助arguments.callee來實現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
本文主要設(shè)計定時器的三種循環(huán)，模板自配，下面分享給大家供大家參考，具體如下：
1、$interlval實現(xiàn)，比較簡單和原生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的遞歸調(diào)用來實現(xiàn)
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來實現(xiàn)
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();
})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Angularjs 手寫日歷的實現(xiàn)代碼（不用插件）
本篇文章介紹了Angularjs 手寫日歷的實現(xiàn)代碼（不用插件），整理了詳細(xì)的代碼，非常具有實用價值，需要的朋友可以參考下2017-10-10
AngularJS實現(xiàn)一次監(jiān)聽多個值發(fā)生的變化
這文章給大家介紹了如何利用AngularJS一次監(jiān)聽多個值發(fā)生的變化，文中通過示例代碼演示，這樣更方便大家理解學(xué)習(xí)，有需要的可以參考借鑒。2016-08-08
angular同一頁面跳轉(zhuǎn)重新執(zhí)行的實現(xiàn)方法
這篇文章主要介紹了angular同一頁面跳轉(zhuǎn)重新執(zhí)行的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
下面小編就為大家?guī)硪黄獪\談AngularJs指令之scope屬性詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識點,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了angularjs通過過濾器返回超鏈接的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了AngularJS 限定$scope的范圍實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了淺談Angular 觀察者模式理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令。這篇教程會為你講述如何自定義指令，以及介紹如何在實際項目中使用。2015-05-05