AngularJS中$timeout和$interval的用法詳解


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

 
         
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM