Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
本文主要設(shè)計(jì)定時(shí)器的三種循環(huán),模板自配,下面分享給大家供大家參考,具體如下:
1、$interlval實(shí)現(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)用來實(shí)現(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來實(shí)現(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集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12詳解angularJS動態(tài)生成的頁面中ng-click無效解決辦法
這篇文章主要介紹了詳解angularJS動態(tài)生成的頁面中ng-click無效解決辦法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06淺談angularjs $http提交數(shù)據(jù)探索
這篇文章主要介紹了淺談angularjs $http提交數(shù)據(jù)探索,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01Angular 4依賴注入學(xué)習(xí)教程之InjectToken的使用(八)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之InjectToken使用的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06AngularJs 最新驗(yàn)證手機(jī)號碼的實(shí)例,成功測試通過
下面小編就為大家分享一篇AngularJs 最新驗(yàn)證手機(jī)號碼的實(shí)例,成功測試通過,具有很好的參考價(jià)值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11Angularjs 1.3 中的$parse實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用(七)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ValueProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲
這篇文章主要介紹了AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04