反振動: 関数は高周波でき事が誘発された後 n 秒以内に一度だけ実行されます、高周波でき事が n 秒以内に再度誘発されれば、時間は再計算されます
アイデア：イベントがトリガーされるたびにキャンセルされる遅延呼び出しメソッド
コードの例：
function debounce(fn) {
let timeout = null; // タイマーの戻り値を保持するタグを作成する。
return function () {
clearTimeout(timeout); // ユーザーが何かを入力するたびに、前回のsetTimeoutをクリアする。
timeout = setTimeout(() => { // 次に新しいsetTimeoutを作成し、文字が入力された後のインターバルにまだ入力された文字がある場合、fn関数は実行されないようにする。
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('アンチシェイク成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); //
スロットリング：高頻度のイベントがトリガーされますが、n秒に1回しか実行されないため、スロットリングによって関数の実行頻度が低下します。
アイデア：イベントがトリガーされるたびに、実行待ちの遅延関数があるかどうかを判断 コード例
function throttle(fn) {
let canRun = true; // クロージャでトークンを保存する
return function () {
if (!canRun) return; // 関数の冒頭で、フラグがtrueかどうかを判定し、trueでなければreturnを返す。
canRun = false; // 即座にfalseに設定する
setTimeout(() => { // 外部入力関数の実行をsetTimeoutに入れる。
fn.apply(this, arguments);
// 最後に、setTimeoutが実行し終わったら、フラグをtrueにセットし、次のループが実行できることを示す。タイマーが実行されない場合、フラグは常にfalseとなり、最初に戻される。
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
