layout: post
title: Angular@1.4.3 中文 API 服務篇 $timeout & $interval
desc: '$timeout 是一個window.setTimeout 的Angular封裝，這個 fn 函數(shù)被封裝成了一個 try/catch 塊并且授 $exceptionHandler 服務以任何例外。$interval是Angular對 window.setInterval 的封裝。fn 函數(shù)將在每次延時的時候執(zhí)行。一個注冊的間隔函數(shù)的返回值是一個 promise
'
categories: jekyll update

$timeout

• ng模塊中的服務

window.setTimeout 的Angular封裝，這個 fn 函數(shù)被封裝成了一個 try/catch 塊并且授 $exceptionHandler 服務以任何例外。

調(diào)用 $timeout 的返回值是一個 promise, 這個 promise 將會在延時已經(jīng)結(jié)束時被解析，
超時函數(shù)（如果有的話）被執(zhí)行了。

退出一個超時請求，調(diào)用 $timeout.cancel(promise)。如果在測試中你可以使用 $timeout.flush()
來同步刷新 deferred函數(shù)的隊列。而如果你僅僅想要得到一個在一個指定延時時間之后會被解析的 promise，
你可以僅僅調(diào)用 $timeout 而不傳入 fn 函數(shù)。

用法

$timeout([fn], [delay], [invokeApply], [Pass]);

參數(shù)

返回

Promise - promise 將會在超時達成后被解析，它的值會被 fn 的返回值解析。

方法

cancel([promise]); - 取消一個與 promise 相關聯(lián)的任務。這個結(jié)果會導致，promise會被拒絕解析。

參數(shù)

返回

boolean - 如果任務沒有被執(zhí)行就被成功取消了，則會返回 true。

$interval

• ng模塊中的服務

Angular對 window.setInterval 的封裝。fn 函數(shù)將在每次延時的時候執(zhí)行。一個注冊的間隔函數(shù)的返回值是一個 promise。
這個 promise 將會在interval每次調(diào)用的時候得到廣播，并且在計數(shù)迭代之后被解析，或者在未指定次數(shù)的情況下既執(zhí)行無數(shù)次時解析。
這個通知的值將是已運行迭代的次數(shù)。如果想終端一個 interval，則調(diào)用 $interval.cancel(promise)。

測試中你可以使用 $interval.flush(millis) 設置其中的 millis 為毫秒時間來到達指定的時間點，
并且會觸發(fā)在此過程中任何的函數(shù)。

注意: 用此服務創(chuàng)建的interval必須要在完成之后被明文銷毀。特別地，在控制器的作用域和指令的元素被銷毀時，
interval 也不會被自動銷毀。你需要將此納入考慮之中，確保在適合的時間退出 interval。詳述之后的例子將會
介紹何時與怎樣去做這些處理。

用法

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

參數(shù)

返回

promise - 一個每次迭代都會被通知的 promise。

方法

cancel([promise]); - 取消一個與 promise 相關的任務。

參數(shù)

返回

boolean - 如果任務被成功取消則返回 true 。

例子

html

<div>
  <div ng-controller="ExampleController">

    <label>Date format: <input ng-model="format"></label> <hr/>
    Current time is: <span my-current-time="format"></span>
    <hr/>

    Blood 1 : <font color='red'>{{blood_1}}</font>
    Blood 2 : <font color='red'>{{blood_2}}</font>

    <button type="button" data-ng-click="fight()">Fight</button>
    <button type="button" data-ng-click="stopFight()">StopFight</button>
    <button type="button" data-ng-click="resetFight()">resetFight</button>
  </div>
</div>

javascsript

angular.module('intervalExample', [])
.controller('ExampleController', ['$scope', '$interval',
  function($scope, $interval) {

    $scope.format = 'M/d/yy h:mm:ss a';
    $scope.blood_1 = 100;
    $scope.blood_2 = 120;

    var stop;
    $scope.fight = function() {
      // 如果$scope.fight進行中，則不會開啟新的 $scope.fight
      if ( angular.isDefined(stop) ) return;

      stop = $interval(function() {
        if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
          $scope.blood_1 = $scope.blood_1 - 3;
          $scope.blood_2 = $scope.blood_2 - 4;
        } else {
          $scope.stopFight();
        }
      }, 100);
    };
    $scope.stopFight = function() {
      if (angular.isDefined(stop)) {
        $interval.cancel(stop);
        stop = undefined;
      }
    };

    $scope.resetFight = function() {
      $scope.blood_1 = 100;
      $scope.blood_2 = 120;
    };

    $scope.$on('$destroy', function() {
      // 保證interval已經(jīng)被銷毀
      $scope.stopFight();
    });
  }])
// 用工廠方法注冊一個 'myCurrentTime' 指令。
// 我們注入 $interval 服務和源自 DI 的 dateFilter 服務。
.directive('myCurrentTime', ['$interval', 'dateFilter',
  function($interval, dateFilter) {

    // 返回指令鏈接的函數(shù). (不需要編譯函數(shù))
    return function(scope, element, attrs) {
      var format,  // 數(shù)據(jù)格式
          stopTime; // 以便我們可以取消時間更新

      // 用于更新 UI
      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }

      // 監(jiān)視表達式，并在改變時更新UI。
      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      stopTime = $interval(updateTime, 1000);

      // 監(jiān)聽 DOM 銷毀(去除)事件，并取消下一次的UI更新
      // 是為了在 DOM 被刪除之后防止再次更新次數(shù)。
      element.on('$destroy', function() {
        $interval.cancel(stopTime);
      });
    }
  }]);