デバウンス
揺れ防止は、その名のとおり、揺れを防ぎ、イベントを何度も間違えないようにします。キーボードをノックすることは、毎日発生する揺れ防止操作です。
概念を理解するには、最初に概念が適用されるシナリオを理解する必要があります。 世界JS、手ぶれ補正のシナリオは何ですか？
- ログインやテキストメッセージなどのボタンは、ユーザーがすばやくクリックするのを防ぐため、複数のリクエストが送信され、シェイク防止が必要です。
- ブラウザウィンドウのサイズを調整するとき、サイズ変更の回数が多すぎて計算が多すぎます。このとき、一度配置する必要があり、手ぶれ防止が使用されます。
- テキストエディタはリアルタイムで保存します。変更操作がない場合は、1秒後に保存されます。
コードは次のとおりです。シェイク防止の焦点はclearTimeout（timer）のクリアにあることがわかります。
function debounce (f, wait) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
f(...args)
}, wait)
}
}
スロットル
名前が示すように、スロットルは水の流れを制御します。1秒に1回、または1分に1回発生するように制御するなど、イベントの発生頻度を制御します。サーバーとゲートウェイによって制御されるレート制限に似ています。
- イベントをスクロールしたり、毎秒位置情報を計算したりします。
- ブラウザの再生イベント、進行状況情報は1秒ごとに計算されます。
- 入力ボックスはリアルタイムで検索し、ドロップダウンリストを表示するためのリクエストを送信し、毎秒リクエストを送信します（アンチシェイクも実行できます）
コードは次のとおりです。スロットルがスイッチロックtimer = nullに焦点を合わせていることがわかります。
function throttle (f, wait) {
let timer
return (...args) => {
if (timer) { return }
timer = setTimeout(() => {
f(...args)
timer = null
}, wait)
}
}Vueのアンチシェイク
アプリケーションシナリオ：送信ボタンを複数回クリックして、初めて実行のために送信します。繰り返し送信すると、実行のために送信するまで一定期間待機します。
export function clickOnce (fn) {
let flag = false
return function () {
if (flag) return
flag = true
fn()
setTimeout(function () {
flag = false
}, 2000)
}
}//util.js
export const debounce = (fn, wait) => {
let delay = wait|| 500
let timerout;
return function () {
let args = arguments;
if (timerout) {
clearTimeout(timer)
}
let callNow = !timerout;
timerout = setTimeout(() => {
timerout = null
}, delay)
if (callNow) fn.apply(this, args)
}
}
//引用
import { debounce } from '@/env/util'
methods:{
refresh:debounce(function(){
//执行函数
this.refreshTypes2('G');
},3000)
}
総括する
初めて送信ボタンをクリックすると、デバウンスメソッドがすぐに実行され、次の3秒でイベントをトリガーせずに実行が続行されます。これは、フォームの重複送信を防ぐのに最適です。
まとめ（簡単な回答）
アンチシェイクとは、機能を最後に実行させることです。
スロットルは、一定の時間ごとに一定の頻度で実行されます。