次の描画前に関数を実行する

次の描画前に関数を実行するには、window.requestAnimationFrameメソッドを使用します。
window.requestAnimationFrameメソッドは次の特徴があります。

• 次の描画が行われる前に関数を呼び出す
• ブラウザの描画更新単位で処理される
• window.setTimeoutメソッドと同じ1度の実行
• ブラウザのタブが非アクティブの場合は、非アクティブになっているタブの処理はFPSを下げる（メモリの消費を抑える）

• ※ IE9以下には対応していません。

構文

var requestId = window.requestAnimationFrame(callback);

戻り値

識別IDの値を返します。

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

(function(w) {
	w.requestAnimationFrame = (function() {
		return {
			w.requestAnimationFrame       ||
			w.webkitRequestAnimationFrame ||
			w.mozRequestAnimationFrame    ||
			w.msRequestAnimationFrame     ||
			w.oRequestAnimationFrame      ||
			function(callback, time) {
				w.setTimeout(callback, (time) ? time : 1000 / 60);
			}
		};
	})();
})(window);

window.cancelAnimationFrameについては、window.requestAnimationFrameメソッドの処理を中止（解除）するページをご覧ください。