setAnimationFrameTimeout
/
モダンブラウザでの繰り返し実行によるアニメーションの実装には、setTimeout / setInterbal ではなく requestAnimationFrame を使え。と言われて久しいですが、少なくとも setTimeout を使う機会は定期的な処理の実行時ではなく、複数の処理を並列で実行する場合に一部の処理をあえて遅らせて負荷分散を図る「遅延実行」時に多くはないでしょうか。
また setTimeout は指定された遅延のタイミングで何が何でも渡された処理を実行しようとするのに対し、requestAnimationFrame はウィンドウがアクティブではない時には FPS を落とすなど柔軟性を持っています。そのため、requestAnimationFrame で処理を実行中に setTimeout で別の処理を実行すると、ユーザーの行動によっては両者の実行タイミングの辻褄が合わなくなることも考えられます。
そこで setTimeout が実現する機能を、モダンブラウザが持つ requestAnimationFrame と performance.now で代替する jQuery プラグインを書いた。
使い方は setTimeout とほぼ同じで
$(function () {
// make the timer.
var timer = $.setAnimationFrameTimeout(function () {
console.log('timeout');
}, 1000);
// cancel the timer.
timer.clearAnimationFrameTimeout();
});
// make the timer.
var timer = $.setAnimationFrameTimeout(function () {
console.log('timeout');
}, 1000);
// cancel the timer.
timer.clearAnimationFrameTimeout();
});
などとしてもらえば OK で、一度セットしたタイマーを途中でキャンセルしたければ clearAnimationFrameTimeout してください。一応レガシーブラウザ向けの polyfill も実装していますが確認はしてません。ｷﾘｯ