angularJS_timeout
[AngularJS] timeoutでの非同期実行
AngularJSでのtimeoutを使用することで、指定のミリ秒後に動作する処理を行うことができます。
以下の例では「Push!」のボタンを押すと「Hello World!!」と表示され、3秒後に「Change!」と表示されます。
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<script type="text/javascript">
<!--
function timerTest($scope, $timeout) {
$scope.click = function() {
$scope.title = "Hello World!!";
$timeout(function() {
$scope.title = "Change!";
}, 3000);
};
}
-->
</script>
</head>
<body>
<h1>非同期処理のテスト</h1>
<hr />
ボタンプッシュすると、3秒後に表示文字が変わります。<br />
<div ng-controller="timerTest">
<form method="POST">
<input type="button" ng-click="click()" value="Push!" /><br />
{{title}}<br />
</form>
</div>
</body>
</html>
ボタンプッシュイベントに関しては「ボタンプッシュでの動作」を参照。
ボタンが押された場合はJavaScriptの「timerTest」が呼ばれますが、引数が「$scope, $timeout」となっています。引数2に渡された「$timeout」で
$timeout(function() {
$scope.title = "Change!";
}, 3000);
とすると、timeoutの第一引数で指定した関数を第二引数のミリ秒後に実行します。
また、この記載後はすぐに次の命令に移行し、この呼び出しは非同期で実行されます。
これを利用し、
$timeout(function() {
// 何か重い処理.
}, 0);
のように第二引数で0を指定して実行することで、重い処理が即座に実行されますがプログラム自体は停止せずに次に移ることができます。
ですが、処理内容によっては若干動作がカクっとなるような感じもします（完全にバックで非同期実行されているわけではない？）。
最終更新時間：2014年05月31日 15時25分08秒
Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.