JavaScriptでユーザーインターフェースを開発していると、スクロールや検索入力、ウィンドウサイズ変更など、短時間に大量のイベントが発生する場面によく遭遇します。
これらのイベントをそのまま処理すると、不要な関数呼び出しが増え、パフォーマンス低下の原因になることがあります。
この記事では、debounce と throttle の違いと、それぞれの適切な使い方を紹介します。
debounce とは？
debounce は、一定時間イベントが発生しなかった場合にのみ処理を実行する仕組みです。
検索ボックスの入力補完やAPI検索など、入力が落ち着いてから処理したいケースに向いています。
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
使用例：
const search = debounce(() => {
console.log("検索を実行");
}, 300);
input.addEventListener("input", search);
この方法を利用すると、ユーザーが文字を入力するたびに検索を実行するのではなく、入力が止まってから一度だけ処理が行われます。
throttle とは？
一方、throttle は一定時間ごとに一度だけ処理を実行します。
スクロールイベントやマウス移動など、高頻度で発生するイベントに適しています。
function throttle(fn, delay) {
let waiting = false;
return (...args) => {
if (waiting) return;
fn(...args);
waiting = true;
setTimeout(() => {
waiting = false;
}, delay);
};
}
使用例：
window.addEventListener(
"scroll",
throttle(() => {
console.log(window.scrollY);
}, 200)
);
これにより、スクロール中でも必要以上に処理が実行されることを防げます。
どちらを選ぶべき？
| シーン | 推奨 |
|---|---|
| 検索入力 | debounce |
| オートコンプリート | debounce |
| スクロール監視 | throttle |
| ウィンドウリサイズ | throttle |
| ドラッグ操作 | throttle |
イベントの特性に応じて使い分けることが重要です。
パフォーマンス改善のポイント
debounce や throttle を導入するだけでなく、次のような工夫も効果的です。
- DOM操作をまとめて実行する
-
requestAnimationFrameを利用する - 不要なイベントリスナーを削除する
- イベント委譲（Event Delegation）を活用する
- 重い計算は Web Worker を検討する
これらを組み合わせることで、より滑らかなユーザー体験を実現できます。
実務での活用例
多くのWebサービスでは、検索フォームや一覧画面、無限スクロールなどでイベント最適化が行われています。
例えば、公開されている JLPH のようなデジタルプラットフォームを参考にすると、検索やページ遷移などで快適な操作感を維持するためには、JavaScriptイベントの適切な制御が重要であることが分かります。もちろん、実際の実装方法はサービスごとに異なりますが、debounce や throttle は多くのWebアプリケーションで活用されている代表的なテクニックです。
まとめ
debounce と throttle は、JavaScriptのイベント処理を最適化するための基本テクニックです。
- 入力が終わってから処理したい場合は debounce
- 一定間隔で処理したい場合は throttle
という考え方を覚えておくと、パフォーマンスとユーザー体験の両方を改善しやすくなります。
小さな最適化の積み重ねが、長期的には保守性や操作性の高いWebアプリケーションにつながるでしょう。