Angular.jsの$intervalと$timeoutを使ってみる

Angular.jsの$intervalと$timeoutとそれぞれのキャンセルの方法を試してみます。

$interval

HTML

<div ng-controller="ctrl">
	<button ng-click="start()">開始</button>
	<button ng-click="stop()">停止</button>
	{{count}}
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope, $interval) {
	$scope.count = 0;
	var timer;
	$scope.start = function() {
		timer = $interval(function() {
			$scope.count++;
		}, 1000);
	};
	$scope.stop = function() {
		$interval.cancel(timer);
	};
});

使い方はsetInterval()とほぼ同じです。
キャンセルする場合、$interval.cancel(変数名);でキャンセルできます。
$intervalのデモページ
　

$timeout

HTML

<div ng-controller="ctrl">
	<button ng-click="start()">3秒後に追加</button>
	<button ng-click="stop()">キャンセル</button>
	{{count}}
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope, $timeout) {
	$scope.count = 0;
	var timer;
	$scope.start = function() {
		timer = $timeout(function() {
			$scope.count++;
		}, 3000);
	};
	$scope.stop = function() {
		$timeout.cancel(timer);
	};
});

キャンセルする場合、$timeout.cancel(変数名);でキャンセルできます。
$timeoutのデモページ
　

【参考サイト】

• AngularJS: API: $interval
• AngularJS: API: $timeout