【JavaScript入門】デバウンスとスロットルの基本｜タイマーを使った入力制御をわかりやすく解説

JavaScriptでは、入力やスクロールなどのイベントが短時間に何度も発生することがあります。
そのまま処理するとパフォーマンスが低下したり、意図しない動作につながることがあります。

そこで役立つのが デバウンス（debounce） と スロットル（throttle） です。
どちらも「イベントの発生回数を制御する」ためのテクニックで、タイマーを使って実現できます。

デバウンス（debounce）とは？

デバウンスは、最後の入力から一定時間経過したら処理を実行する方法です。
ユーザーが入力を続けている間は処理を実行せず、入力が止まったタイミングで動きます。

デバウンスの実装例（setTimeout）

let timer;

function onInput() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log("入力が止まって500ms後に実行");
    }, 500);
}

検索フォームや入力補助など、無駄な処理を減らしたい場面でよく使われます。

スロットル（throttle）とは？

スロットルは、一定間隔ごとに処理を実行する方法です。
イベントが何度発生しても、指定した間隔内では1回しか処理されません。

スロットルの実装例（setInterval）

let isRunning = false;

function onScroll() {
    if (isRunning) return;

    isRunning = true;
    setTimeout(() => {
        console.log("スクロール中に500msごとに実行");
        isRunning = false;
    }, 500);
}

スクロールイベントやウィンドウリサイズなど、頻繁に発生するイベントに向いています。

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

実例：入力フォームでデバウンスを使う

let timer;

function searchInput(value) {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log("検索実行:", value);
    }, 300);
}

HTML側

<input type="text" oninput="searchInput(this.value)" placeholder="検索ワードを入力">

入力が止まったタイミングで検索処理が実行されるため、無駄なリクエストを減らせます。

まとめ

• デバウンスは「最後の操作後に実行」する制御方法
• スロットルは「一定間隔ごとに実行」する制御方法
• 入力フォームにはデバウンス、スクロールにはスロットルが向いている
• タイマーを使うことで簡単に実装できる