揺れ防止とスロットリングは一般的な JavaScript パフォーマンス最適化手法であり、通常、マウスのスクロール、ウィンドウの調整、検索入力など、頻繁にトリガーされるイベントを処理するために使用されます。
デバウンスとスロットルはどちらも、イベントがトリガーされる頻度を制限することでパフォーマンスを最適化しますが、その方法は異なります。
手ぶれ補正
- アンチシェイクの実装は次のとおりです。イベントがトリガーされた後、タイマーが設定され、指定された時間内にイベントが再度トリガーされると、前のタイマーがクリアされ、新しいタイマーがリセットされます。指定した時間内にイベントが再度トリガーされなかった場合にのみ、イベントのコールバック関数が実行されます。
一般的な手ぶれ補正アプリケーションのシナリオには、検索ボックスの入力、ドラッグ アンド ドロップによるウィンドウ サイズの調整などが含まれます。
以下は手ぶれ補正のサンプルコードです。
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
}
}
function handleInput() {
console.log('Input value:', this.value);
}
const input = document.querySelector('input');
input.addEventListener('input', debounce(handleInput, 500));
この例では、手ぶれ補正機能 debounce を使用して、入力イベントのパフォーマンスを最適化します。ユーザーが入力ボックスに入力すると、デバウンス関数は500 ミリ秒後に
handleInput
コールバック関数を実行します。この期間中にユーザーが再度入力すると、ユーザーが入力を停止するまで前のタイマーはクリアされ、新しいタイマーがリセットされます。コールバック関数は500ms 後に実行されます
。
スロットリング
- スロットリングは次の方法で実装されます。イベントは一定期間内に 1 回のみトリガーできます。イベントが指定時間内に複数回トリガーされた場合、イベントのコールバック関数は 1 回だけ実行されます。
一般的なスロットリング アプリケーション シナリオには、スクロール読み込み、ウィンドウ調整などが含まれます。
スロットルのサンプルコードは次のとおりです。
function throttle(fn, delay) {
let timer = null;
let lastTime = null;
return function(...args) {
const now = new Date().getTime();
if (lastTime && now - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(() => {
lastTime = now;
fn.apply(this, args);
}, delay);
} else {
lastTime = now;
fn.apply(this, args);
}
}
}
function handleScroll() {
console.log('Window scrolled:', window.scrollY);
}
window.addEventListener('scroll', throttle(handleScroll, 500));
この例では、スロットル関数 throttle を使用して、ウィンドウ スクロール イベントのパフォーマンスを最適化します。ユーザーがウィンドウをスクロールすると、スロットル関数は
500 ミリ秒後に handleScroll コールバック関数を実行します。ユーザーがこの期間中に再度ウィンドウをスクロールした場合、handleScroll コールバック関数は
500 ミリ秒後まで実行されません。
注: 上記の例では、最初に割り当てが実行され、500 ミリ秒後に再度実行されます。