WebサイトやWebアプリケーションの開発では、スクロールやリサイズ、入力イベントのように高頻度で発火する処理をそのまま実行するとパフォーマンス低下の原因になります。これを防ぐためによく使われるのがdebounce（デバウンス）とthrottle（スロットル）です。似ていますが挙動が異なるため、用途に応じて正しく使い分ける必要があります。
debounceとは
debounceは「最後のイベント発火から一定時間経過するまで処理を遅延させる」仕組みです。イベントが連続して発生する間は処理が実行されず、止まったタイミングで一度だけ呼び出されます。入力フォームの文字入力後にサーバー検索を行うケースなどに適しています。
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 例: 入力が止まって500ms後に処理
const handleInput = debounce((e) => {
console.log('検索ワード:', e.target.value);
}, 500);
document.querySelector('#search').addEventListener('input', handleInput);
throttleとは
throttleは「一定間隔ごとに処理を実行する」仕組みです。イベントが何度発火しても、指定した間隔で最大1回だけ処理を実行します。スクロール位置の監視やウィンドウリサイズに応じた処理など、常にイベントを監視しつつ頻度を制御したい場合に適しています。
function throttle(func, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
func.apply(this, args);
lastTime = now;
}
};
}
// 例: スクロール時に200msごとに処理
const handleScroll = throttle(() => {
console.log('スクロール位置:', window.scrollY);
}, 200);
window.addEventListener('scroll', handleScroll);
違いの比較
| 特徴 | debounce | throttle |
|---|---|---|
| 実行タイミング | イベントが止まった後に一度だけ | 一定間隔ごとに実行 |
| 適したケース | 入力後の検索、ウィンドウサイズ変更後の処理 | スクロール監視、マウス移動処理 |
| 処理回数 | 最小限（連続中は実行しない） | 間隔内で制御しながら複数回 |
使い分けのポイント
ユーザー操作が完了したタイミングで一度だけ処理したい場合はdebounceを、継続的に監視しながら負荷を抑えたい場合はthrottleを選択します。両者を適切に使い分けることで、パフォーマンスを保ちながら快適なユーザー体験を実現できます。
まとめ
debounceは「最後に一度だけ」、throttleは「一定間隔ごとに」という違いがあります。入力フォームや検索機能にはdebounce、スクロールやリサイズイベントにはthrottleを使うのが一般的です。これらを理解して実装することで、余分な処理を減らし、快適な操作感を提供できるようになります。
