1. 手ぶれ補正とスロットリングを理解する
アンチシェイク:単位時間内に頻繁にイベントをトリガーし、最後の時間のみが有効になります
例：都市に戻るときにゲームが中断された場合、もう一度都市に戻るをクリックすると時間が再開されます.最終的に中断されていない最後の時間だけが都市に正常に戻ることができます.手ぶれ防止です
スロットリング:イベントは単位時間内に頻繁にトリガーされ、一度だけ有効になります (つまり、最初にのみ有効になります)。
たとえば、マウスが次のカルーセル画像をクリックすると、カルーセルが単位時間に何回クリックされても、カルーセル画像は 2 秒で置き換えられます。これはスロットリングです。
アンチシェイクとスロットリングの両方がパフォーマンス最適化の手段です
二、同じ
1. どちらも setTimeout を使用して実現できます
2. どちらもコールバック実行の頻度を減らし、コンピューティング リソースを節約できます。
3. 違い
1. 異なる定義
機能アンチシェイク：イベントを一定期間連続してトリガーし、最後にのみ実行します
関数のスロットリング: イベント内で 1 回だけ実行する
2. さまざまなアプリケーション シナリオ
手ぶれ防止: (1) 携帯電話番号とメールアドレスの確認 (2) ユーザーが入力ボックスに入力した後、検索などのリクエストを送信します。
スロットリング: 確認コードを取得するまでの秒数、サイズ変更イベント、スクロール イベントなど、頻度の高いイベント。
4. コードの実装
1.アンチシェイク：
<本体>
<input type="テキスト" id="i">
<スクリプト>
// 1.手ぶれ防止
document.querySelector('#i').addEventListener('input', () => {
デバウンス()
}))
let timeId = null
const デバウンス = () => {
clearTimeout(timeId)
timeId = setTimeout(() => {
console.log("手ぶれ補正の最後の出力");
}、1000)
}
</script>
</body>
防振効果:
2. スロットリング:
<本体>
<input type="button" id="btn" value="確認コードを取得">
<スクリプト>
// 2.スロットリング
let flag = true // コントロール スイッチを設定します
let timeId = null
const inp = document.querySelector('#btn')
inp.addEventListener("クリック", () => {
if (!フラグ) {
戻る
}
フラグ = false
s = 5 とする
timeId = setInterval(() => {
s -= 1
もし (s < 1) {
inp.value = '認証コードを取得'
フラグ = 真
s = 5
clearInterval(timeId)
} それ以外 {
inp.value = s + '確認コードを数秒で再度取得'
}
}、1000)
}))
</script>
</body>