デバウンスとスロットリングの違いと適用シナリオ

フロントエンド開発において、パフォーマンスとユーザーエクスペリエンスを向上させるために、頻繁にトリガーされるイベントを制御する必要があります。デバウンス(Debounce)とスロットリング(Throttle)は、よく使われる2つの技術手段です。この記事では、デバウンスとスロットリングの概念、違い、および実際の開発における適用シナリオについて詳しく説明します。

デバウンス(Debounce)

デバウンスは、関数の呼び出し頻度を制御する技術です。特定のイベントが継続して発生する場合、デバウンスは関数の実行を遅延させ、イベントが停止してから一定時間後に関数を実行します。遅延期間中にイベントが再び発生した場合、タイマーをリセットします。

サンプルコード

1
function debounce(func, wait) {
2
let timeout;
3
return function (...args) {
4
clearTimeout(timeout);
5
timeout = setTimeout(() => {
6
func.apply(this, args);
7
}, wait);
8
};
9
}
10
11
// デバウンスの適用
12
const handleResize = debounce(() => {
13
console.log("Window resized");
14
}, 300);
15
16
window.addEventListener("resize", handleResize);

上記のコードでは、handleResize 関数はウィンドウサイズが300ミリ秒間変更されないときに一度だけ実行されます。

スロットリング(Throttle)

スロットリングも関数の呼び出し頻度を制御する技術ですが、デバウンスとは異なり、スロットリングは一定時間間隔内で関数を一度だけ実行します。イベントがその時間間隔内で何回発生しても、関数は一度だけ実行されます。

サンプルコード

1
function throttle(func, delay) {
2
let lastCall = 0;
3
return (...args) => {
4
const now = new Date().getTime();
5
if (now - lastCall < delay) {
6
return;
7
}
8
lastCall = now;
9
return func(...args);
10
};
11
}
12
13
// スロットリングの適用
14
const handleScroll = throttle(() => {
15
console.log("Window scrolled");
16
}, 300);
17
18
window.addEventListener("scroll", handleScroll);

上記のコードでは、handleScroll 関数はウィンドウスクロール時に300ミリ秒ごとに一度だけ実行されます。

デバウンスとスロットリングの違い

  • トリガー方式

    • デバウンス:イベントが停止してから一定時間後に関数を実行します。
    • スロットリング:一定時間間隔内で関数を一度だけ実行します。
  • 適用シナリオ

    • デバウンス:ユーザーが入力や操作を停止してから処理を実行するシナリオに適しています。例:検索ボックスの自動補完、フォームの検証。
    • スロットリング:一定時間内に一度だけ実行する必要があるシナリオに適しています。例:ウィンドウスクロールイベント、ボタンの連続クリック防止。

適用シナリオ

デバウンス適用シナリオ

  1. 検索ボックスの自動補完:ユーザーが入力を停止してからリクエストを送信します。
  2. フォームの検証:ユーザーがフォームに入力中に頻繁に検証ロジックをトリガーするのを防ぎ、入力が停止してから検証を実行します。
  3. ウィンドウサイズの調整:ユーザーがウィンドウサイズをドラッグしているときに頻繁に調整ロジックをトリガーするのを防ぎます。

スロットリング適用シナリオ

  1. ウィンドウスクロールイベント:スクロール時に頻繁にスクロールロジックをトリガーするのを防ぎます。例:遅延読み込み、無限スクロール。
  2. ボタンの連続クリック防止:短時間内にボタンが何度もクリックされるのを防ぎ、複数回のリクエスト送信を防止します。
  3. アニメーションおよびゲームの更新ロジック:一定時間間隔内で一度だけ更新ロジックを実行し、パフォーマンスの問題を防ぎます。

まとめ

デバウンスとスロットリングは、フロントエンドパフォーマンス最適化のための一般的な技術手段です。これらの技術を使用することで、頻繁にトリガーされるイベントによるパフォーマンスの問題を回避できます。デバウンスはイベントが停止してから関数を実行するシナリオに適しており、スロットリングは一定時間間隔内で関数を一度だけ実行するシナリオに適しています。これらの技術を理解し適切に適用することで、アプリケーションのパフォーマンスとユーザーエクスペリエンスを大幅に向上させることができます。