Angular 定時器$timeout和$interval，延時調用

項目中有用到定時器定時刷新頁面的數據，在網上查看了一些資料，整理了一下，備忘。

$timeout

用法如下：$timeout(fn,[delay],[invokeApply]);

• fn：一個將被延遲執行的函數。
• delay：延遲的時間（毫秒）。
• invokeApply：如果設置為false，則跳過臟值檢測，否則將調用$apply。

方法：cancel(promise); 
promise：$timeout函數的返回值。

具體使用：在項目中用到的其中一處是鍵入字符然后自動發送請求查詢，如果每鍵入一個字符即發送一次請求，在數據庫表龐大的時候，數據庫肯定會有意見了。這時候就需要用到延時查詢了，還需要結合$watch，具體使用如下：

var timeout;
$scope.$watch('idNo', function(newVal, oldVal) {
  if(newVal != oldVal) {
    if(timeout) {
      $timeout.cancel(timeout);
    }
    timeout = $timeout(function() {
      $http.get(url).success(function(data) {});
    }, 800);
  }
});

如上寫法，if(newVal != oldVal){}是默認情況下不查詢，鍵入字符后才會發送請求查詢，若想默認情況下就查詢則需要去掉該if判斷。$timeout.cancel(timeout);是清除上次$itmeout返回的promise。

$interval

用法如下：$interval(fn,delay,[count],[invokeApply],[Pass]);

• fn:一個將被反復執行的函數。
• delay：每次調用的間隔毫秒數值。
• count：循環次數的數值，如果沒設置，則無限制循環。
• invokeApply：如果設置為false，則避開臟值檢查，否則將調用$apply。
• Pass：函數的附加參數。

方法：cancel(promise); 
promise：$interval函數的返回值。 
具體使用：

1.經常使用的是

function hello() {
...
    console.log("hello world");
}
var timer = $interval(function(){
  function hello() {}
},100);
timer.then(function() {
  console.log("done");
});

以上是每100毫秒執行hello()函數，每執行完一次則調用then函數。 
2. 控制循環的次數：var timer = $interval(function(){},100,10);，參數10則是限制定時器循環10次，若該參數沒有定義則表示無數次循環。 
3. 清除interval定時器：通過‘interval.cancle(timer)`刪除$interval返回的promise即可清除，而且必須要清除，否則會無限循環。在angular controller中只要開始執行定時任務，只要不清除則會一直執行，無論是否切換到其他的controller和頁面，可能會導致不必要的錯誤。 
4. 項目中用到的完整實例：

// 定時器 定時刷新數據
var timer = $interval(
  function() {
    hello();//自己定義的每次需要執行的函數，也可以寫一些其他的內容
  },
  5000
);
//當DOM元素從頁面中被移除時，AngularJS將會在scope中觸發$destory事件。
//這讓我們可以有機會來cancel任何潛在的定時器。切換controller、頁面后即可調用
$scope.$on(
  "$destroy",
  function() {
    $interval.cancel( timer );
  }
);

 

本文轉載自：http://blog.csdn.net/xuanhaiyang2008/article/details/52121540