【繰り返し処理の最適化】JavaScriptの setInterval を使わずに GSAP の onRepeat で実装する。
繰り返し処理を実装する際はsetIntervalを使用することが多いかと思いますが、今回はGSAPのonRepeatで実装する方法をご紹介します。
setInterval で実装する際の気になる点
setIntervalで繰り返し処理を実装する際の気になる点は以下です。
- 別タブを選択すると実行間隔が間引きされて実行され続ける
ブラウザはパフォーマンスを最適化するため、アクティブでないタブ（別タブを選択している場合など）のJavaScript実行を制限します。この現象は「スロットリング」と呼ばれ、ブラウザによって実行制限は変化します。
例えば、以下のコードを実行中に別のタブに切り替えると、3秒ごとの正確な実行がブラウザによって保証されなくなります。
setInterval(() => {
console.log("Hello!");
}, 3000);
- 繰り返し処理を停止するためにインターバル
IDを保存する必要がある
setIntervalで開始した処理を停止するには、clearIntervalに引数としてインターバルIDを渡す必要があります。そのため、setIntervalの戻り値をどこかに保存しておく必要があります。
const intervalId = setInterval(() => {
// 繰り返し処理
}, 3000);
clearInterval(intervalId);
また、一時停止・再開といった制御をしたい場合、処理も少し冗長になります。
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval
GSAP の onRepeat での実装例
別の記事で何度も紹介させていただいてますが、この問題を解決するために、今回もGSAPを使用します！
gsap.to()に空のオブジェクトを登録してrepeatに-1を指定することで、その処理を無限に繰り返します。後はonRepeatで繰り返し処理の開始時のコールバックを設定できます。
gsap.to({}, {
duration: 3, // 実行間隔
repeat: -1, // -1を指定することで処理を無限に繰り返す
onRepeat: () => {
console.log("3秒ごとに繰り返し処理が実行されました。");
}
});
GSAPは内部的にrequestAnimationFrameを使用しているので、別タブに切り替わると自動で処理が停止します。
また、一時停止・再開といった制御もシンプルに実装することができます。
const animation = gsap.to({}, {
duration: 3, // 実行間隔
repeat: -1, // -1を指定することで処理を無限に繰り返す
onRepeat: () => {
console.log("3秒ごとに繰り返し処理が実行されました。");
}
});
animation.pause() // 停止
animation.resume() // 再開
まとめ
GSAPには便利なメソッドやユーティリティが多数存在して、ぼくもまだまだ勉強できていないです...。
クリエイティブなWEBサイト制作には必須とも言えるライブラリなので、今後もインプットしていこうと思います。
GSAPで別の良い書き方があれば、ぜひお問い合わせで教えてください。
