window.requestAnimationFrameメソッドの処理を中止(解除)する

window.requestAnimationFrameメソッドの処理を中止(解除)するには、window.cancelAnimationFrameメソッドを使用します。

構文

window.cancelAnimationFrame(id);
引数名 説明
第一引数
必須
id number window.requestAnimationFrameメソッドにより返されたID値

サンプルコード

JavaScript

var i = 0;

var loop = function() {
	var id = window.requestAnimationFrame(loop);

	i++;

	if (i === 1000) window.cancelAnimationFrame(id);
}

loop();

なお、window.cancelAnimationFrameメソッドはプレフィックスが必要であったりメソッド自体が未対応なブラウザがあるため、ポリフィルを用意するとよいかもしれません。

JavaScript

(function(w) {
	w.cancelAnimationFrame = (function() {
		return {
			w.cancelAnimationFrame       ||
			w.webkitCancelAnimationFrame ||
			w.mozCancelAnimationFrame    ||
			w.msCancelAnimationFrame     ||
			w.oCancelAnimationFrame      ||
			function(requestId) {
				w.clearTimeout(requestId);
			}
		};
	})();
})(window);

window.requestAnimationFrameについては、次の描画前に関数を実行するページをご覧ください。

JavaScript逆引きリファレンス一覧へ戻る