AngularJs $interval 和 $timeout

標籤：images   shu   exce   class   style   file   ams   未定義   handle   

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

 

$interval,$timeout使用方法詳解：

1. 先將$interval,$timeout,作為參數注入到controller中,例如rds.controller(‘controllerCtrl‘, [‘app‘, ‘$scope‘,‘$http‘,‘$routeParams‘,‘$filter‘,‘$location‘,‘$interval‘,‘$timeout‘,

    function (app, $scope,$http,$routeParams,$filter,$location,$interval,$timeout) {
2.在需要用的地方寫上該方法 例如  $scope.timer = $interval( function(){

    $scope.backup("1");
  }, 10000);

一開始以為是把需要調用的方法直接寫在function(){}的位置,探索方法走到定時器時直接執行了該方法並沒有迴圈執行,後來發現需要把需要調用的方法寫在function內,10000表示10秒迴圈一次.如果要定義迴圈次數 只需要寫成如下這樣 $scope.timer = $interval( function(){

    $scope.backup("1");
  }, 10000,3); 3代表迴圈3次就自動停止迴圈了.

3.終止定時器 $interval.cancel($scope.timer);

4.$timeout的用法也類似 ,只是$timeout是延遲多少秒後迴圈一次,而$interval是每隔多少秒迴圈一次,如果不終止就一直迴圈

下面是摘自部落格 比較高大上的介紹

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"]，裡面有很多不錯的文章。

AngularJs $interval 和 $timeout