1.防振
高周波イベントがトリガーされた後、n秒以内に1回だけ実行され、n秒以内に再度トリガーされた場合は時間が再計算されます。
防振デザインのアイデア：
- トリガーイベント
- 明確なタイミング
- タイミングを設定する
指定時間内にリクエスト/イベント操作が残っている場合は、タイミングをクリアしてタイミングをリセットします。
指定時間内にリクエスト/イベントがない場合は、送信または以下の操作を行うことができます。
コード
let btn = document.querySelector('button')
function payMoney() {
console.log('已剁');
}
function debounce(payMoney, delay) {
let timer //1. 防止多次创建timer 2.(第二次点击时，由于闭包的原因 第一次的timer会存在)
return function () {
let context = this //保存button的this
let args = arguments //参数
clearTimeout(timer)
timer = setTimeout(() => {
payMoney.apply(context, args) //调用函数，修改this指向为context(button),添加参数
}, delay);
}
}
btn.addEventListener('click',debounce(payMoney,2000))
2.スロットル
高周波イベントは発生しますが、n秒に1回しか実行されないため、スロットリングによって関数の実行頻度が低下します。
スロットルの設計アイデア：
- トリガーイベント
- 判断：トリガーイベントは時間間隔内ですか？はい：トリガーしません;いいえ：トリガーします
- タイミングを設定する
指定された時間内にリクエスト/イベント操作がまだある場合、このリクエスト/イベント操作は最初のイベントトリガーを待機する必要があります。
コード
function coloring() {
let r = Math.floor(Math.random() * 255)
let g = Math.floor(Math.random() * 255)
let b = Math.floor(Math.random() * 255)
document.body.style.background = `rgb(${
r},${
g},${
b})`
}
function throttle(coloring,delay) {
let timer
return function() {
let contxt = this
let args = arguments
//判断：如果有timer，说明上一个时间还未结束
if(timer) {
return //没结束你就return停止，等上一个结束
}
timer = setTimeout(() => {
coloring.apply(contxt,args)
timer = null //timer不在事件完成之后给null的话，上面的if会一直判断为真
}, delay);
}
}
window.addEventListener('resize',throttle(coloring,2000))
3.まとめ
防抖：複数の操作を1つの操作に結合します。原則として、遅延時間後に機能がトリガーされることを規定するタイマーを維持しますが、遅延時間内に再度トリガーされると、前のタイマーはキャンセルされてリセットされます。このように、最後のアクションのみをトリガーできます。
节流：関数を一定期間内に1回だけトリガーします。原理は、実行されていない遅延呼び出し関数があるかどうかを判断することです。
違い
関数スロットリングは、イベントがトリガーされる頻度に関係なく、実際のイベントハンドラーが指定された時間内に一度実行されることを保証しますが、関数アンチシェイクは最後のイベントの後に一度だけ関数をトリガーします。
たとえば、ページの無限読み込みシナリオでは、ユーザーがページのスクロールを停止したときにデータをリクエストするのではなく、ページのスクロール中に時々Ajaxリクエストを送信する必要があります。このようなシナリオは、スロットルテクノロジーを実現するのに適しています。