AngularJs定時器$interval 和 $timeout詳解
$interval
window.setInterval的Angular包裝形式。Fn是每次延遲時間后被執(zhí)行的函數(shù)。
間隔函數(shù)的返回值是一個承諾。這個承諾將在每個間隔刻度被通知,并且到達規(guī)定迭代次數(shù)后被取消,如果迭代次數(shù)未定義,則無限制的執(zhí)行。通知的值將是運行的迭代次數(shù)。取消一個間隔,調用$intreval.cancel(promise)。
備注:當你執(zhí)行完這項服務后應該把它銷毀。特別是當controller或者directive元素被銷毀時而$interval未被銷毀。你應該考慮到在適當?shù)臅r候取消interval事件。
使用:$interval(fn,delay,[count],[invokeApply],[Pass]);
fn:一個將被反復執(zhí)行的函數(shù)。
delay:每次調用的間隔毫秒數(shù)值。
count:循環(huán)次數(shù)的數(shù)值,如果沒設置,則無限制循環(huán)。
invokeApply:如果設置為false,則避開臟值檢查,否則將調用$apply。
Pass:函數(shù)的附加參數(shù)。
方法:
cancel(promise);
取消與承諾相關聯(lián)的任務。
promise:$interval函數(shù)的返回值。
使用代碼:
(function () { angular.module("Demo", []) .controller("testCtrl",["$interval",testCtrl]); function testCtrl($interval){ var toDo = function () { console.log("Hello World"); }; $interval(toDo, 3000, 10); }; }());
$timeout
window.setTimeout的Angular包裝形式。Fn函數(shù)包裝成一個try/catch塊,代表$exceptionHandler服務里的任何異常。
timeout函數(shù)的返回值是一個promise,當?shù)竭_設置的超時時間時,這個承諾將被解決,并執(zhí)行timeout函數(shù)。
需要取消timeout,需要調用$timeout.cancel(promise);
使用: $timeout(fn,[delay],[invokeApply]);
fn:一個將被延遲執(zhí)行的函數(shù)。
delay:延遲的時間(毫秒)。
invokeApply:如果設置為false,則跳過臟值檢測,否則將調用$apply。
方法:
cancel(promise);
取消與承諾相關聯(lián)的任務。這個的結果是,承諾將被以摒棄方式來解決。
promise:$timeout函數(shù)返回的承諾。
(function () { angular.module("Demo", []) .controller("testCtrl",["$timeout",testCtrl]); function testCtrl($timeout){ var toDo = function () { console.log("Hello World"); }; $timeout(toDo,5000) }; }());
大致使用方法可以和原生js的setInterval和setTimeout那樣使用,一些使用小技巧可以用在瀏覽器單線程的事件執(zhí)行方面...
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能
這篇文章主要介紹了Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下2017-08-08AngularJs導出數(shù)據(jù)到Excel的示例代碼
本篇文章主要介紹了AngularJs導出Excel的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法,結合實例形式分析了AngularJS動態(tài)編輯構建模板的相關操作技巧,需要的朋友可以參考下2016-11-11深入學習JavaScript的AngularJS框架中指令的使用方法
這篇文章主要介紹了深入學習JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入門學習中的基礎知識,需要的朋友可以參考下2016-03-03