1. 程式人生 > >AngularJs $interval 和 $timeout

AngularJs $interval 和 $timeout

$interval

window.setInterval的Angular包裝形式。Fn是每次延遲時間後被執行的函式。

間隔函式的返回值是一個承諾。這個承諾將在每個間隔刻度被通知,並且到達規定迭代次數後被取消,如果迭代次數未定義,則無限制的執行。通知的值將是執行的迭代次數。取消一個間隔,呼叫$intreval.cancel(promise)。

備註:當你執行完這項服務後應該把它銷燬。特別是當controller或者directive元素被銷燬時而$interval未被銷燬。你應該考慮到在適當的時候取消interval事件。

使用:$interval(fn,delay,[count],[invokeApply],[Pass]);

fn:一個將被反覆執行的函式。

delay:每次呼叫的間隔毫秒數值。

count:迴圈次數的數值,如果沒設定,則無限制迴圈。

invokeApply:如果設定為false,則避開髒值檢查,否則將呼叫$apply。

Pass:函式的附加引數。

方法

cancel(promise);

取消與承諾相關聯的任務。

promise:$interval函式的返回值。

使用程式碼:

複製程式碼
  (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函式包裝成一個try/catch塊,代表$exceptionHandler服務裡的任何異常。

timeout函式的返回值是一個promise,當到達設定的超時時間時,這個承諾將被解決,並執行timeout函式。

需要取消timeout,需要呼叫$timeout.cancel(promise);

使用: $timeout(fn,[delay],[invokeApply]);

fn:一個將被延遲執行的函式。

delay:延遲的時間(毫秒)。

invokeApply:如果設定為false,則跳過髒值檢測,否則將呼叫$apply。

方法

cancel(promise);

取消與承諾相關聯的任務。這個的結果是,承諾將被以摒棄方式來解決。

promise:$timeout函式返回的承諾。

複製程式碼
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$timeout",testCtrl]);
    function testCtrl($timeout){
      var toDo = function () {
          console.log("Hello World");
      };
      $timeout(toDo,5000)
    };
  }());
複製程式碼

大致使用方法可以和原生js的setInterval和setTimeout那樣使用,一些使用小技巧可以用在瀏覽器單執行緒的事件執行方面...  詳情推薦看破狼的文章“JavaScript單執行緒和瀏覽器事件迴圈簡述”,也可以關注其微信公眾號["shuang_lang_shuo"],裡面有很多不錯的文章。