デバウンスとは？
デバウンス（debounce）とは、短い時間に何度も発生するイベントに対して、ある一定時間内に再度発生したイベントは無視し、最後のイベントのみを処理する手法です。これはたとえば、リサイズやスクロールなどのイベントでよく使われます。ユーザーのアクションに対して、連続して発生するイベントを全て処理するとパフォーマンスが悪くなるため、デバウンスを使って無駄な処理を減らすわけです。
実装
function debounce(fn, delay = 200) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
function handleMouseMove(event) {
console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
}
const debouncedMouseMove = debounce(handleMouseMove, 50);
document.addEventListener('mousemove', debouncedMouseMove);デバウンス処理の流れ解説
- 関数を定義する(handleMouseMove)
まず、処理したい内容を関数として定義します。例えば、マウスの位置を表示する関数を考えます。 - デバウンス関数を作成する(debounce)
デバウンス関数は、引数として先ほど定義した関数を受け取ります。この関数は、実際にイベントが発生したときに、すぐにその関数を実行するのではなく、一定時間待つようにします。 - タイマーを使う
デバウンス関数の中では、「タイマー」という仕組みを使います。イベントが発生するたびに、前回設定したタイマーをクリア（リセット）し、新たにタイマーを設定します。このタイマーが経過するまでにまたイベントが発生したら、再びタイマーをリセットします。 - 最後のイベントのみを処理する タイマーが設定された時間が経過すると、最後に発生したイベントに対してだけ関数が実行されます。このとき、タイマーがリセットされたり新たにセットされたりすることはありません。
JavaScriptでは、関数が別の関数を返す際に、返される関数はその親関数のスコープにある変数にアクセスできる性質があります。これを「クロージャ（closure）」と呼んでいます。この性質のおかげで、debounce関数内で宣言されたtimer変数は、debounce関数が返す関数からアクセス可能となり、共有されるように振る舞います。
コメント