AngularJSの$timeoutサービスと$intervalサービス

wp-admin

7年前

AngularJSの$timeoutサービスと$intervalサービスを使って登録した関数を遅延実行したり、繰返し実行する方法をまとめました。

デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．概要
２．構文
３．サンプルコード

概要

AngularJSの$timeoutサービスと$intervalサービスは、window.setInterval、window.setTimeout関数へのアクセスを提供するサービスです。
　
どちらも指定した時間、登録した関数を遅延実行し、$timeoutは一度だけ実行するのに対し、$intervalは繰返し実行します。
　
リターンされるのはプロミスオブジェクトで指定した時間に達すると登録した関数が実行されます。

構文

１）$timeout
　
$timeout([fn], [delay], [invokeApply], [Pass]);
　
○fn
遅延実行する関数
　
○delay
遅延時間。ミリ秒単位。
　
○invokeApply
関数fnが$scope.$applyブロック内で実行させるかどうか。デフォルトはtrue。
　
○Pass
関数fnに追加で渡す引数。
　
２）$interval
　
①登録
var promise = $interval(fn, delay, [count], [invokeApply], [Pass]);
　
○fn
遅延実行する関数
　
○delay
遅延時間。ミリ秒単位。
　
○count
繰返し実行する回数。0の場合は無制限に繰り返す。
　
○invokeApply
関数fnが$scope.$applyブロック内で実行させるかどうか。デフォルトはtrue。
　
○Pass
関数fnに追加で渡す引数。
　
②キャンセル
　
$interval.cancel(promise)
　
作成したインターバルオブジェクトは、自動で削除されないので（コントローラのスコープや該当要素が消失しても）、cancelメソッドを使って明示的に削除するようにします。

サンプルコード

①$timeoutサービス
　
５秒後に登録した関数を実行し、ログを出力。
　
②$intervalサービス
　
・２秒サイクルで現在の時刻を表示。
・該当HTML要素がDOMから削除され、”$destroy”イベントを検知するとcanselメソッドを実行し、intervalオブジェクトを削除する。
　

var intervalStop = function() {
  if (angular.isDefined(time)) {
    $interval.cancel(time);
    time = undefined;
  }
};
$scope.$on('$destroy', function() {
  console.log("destroy");
  intervalStop();
});

コンソールログを見ると、SubCtrl-Bに切替えると”$destroy”イベントを検知し、時刻表示が終了される事が確認出来ます。
　
intervalStop()をコメントアウトして、cancelを行わないとSubCtrl-Bに切替えても時刻表示が継続されてしまいます。
　
デモとコードサンプルはこちら。