AngularJSの$timeoutサービスと$intervalサービスを使って登録した関数を遅延実行したり、繰返し実行する方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
概要
AngularJSの$timeoutサービスと$intervalサービスは、window.setInterval、window.setTimeout関数へのアクセスを提供するサービスです。
どちらも指定した時間、登録した関数を遅延実行し、$timeoutは一度だけ実行するのに対し、$intervalは繰返し実行します。
リターンされるのはプロミスオブジェクトで指定した時間に達すると登録した関数が実行されます。
どちらも指定した時間、登録した関数を遅延実行し、$timeoutは一度だけ実行するのに対し、$intervalは繰返し実行します。
リターンされるのはプロミスオブジェクトで指定した時間に達すると登録した関数が実行されます。
構文
1)$timeout
$timeout([fn], [delay], [invokeApply], [Pass]);
○fn
遅延実行する関数
○delay
遅延時間。ミリ秒単位。
○invokeApply
関数fnが$scope.$applyブロック内で実行させるかどうか。デフォルトはtrue。
○Pass
関数fnに追加で渡す引数。
2)$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([fn], [delay], [invokeApply], [Pass]);
○fn
遅延実行する関数
○delay
遅延時間。ミリ秒単位。
○invokeApply
関数fnが$scope.$applyブロック内で実行させるかどうか。デフォルトはtrue。
○Pass
関数fnに追加で渡す引数。
2)$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サービス
5秒後に登録した関数を実行し、ログを出力。
②$intervalサービス
・2秒サイクルで現在の時刻を表示。
・該当HTML要素がDOMから削除され、”$destroy”イベントを検知するとcanselメソッドを実行し、intervalオブジェクトを削除する。
5秒後に登録した関数を実行し、ログを出力。
②$intervalサービス
・2秒サイクルで現在の時刻を表示。
・該当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に切替えても時刻表示が継続されてしまいます。
デモとコードサンプルはこちら。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ