手ぶれ補正機能とスロットリング機能

手ぶれ補正機能

名前のとおり、震える手で誤って2回クリックしたり、震え続けたりするのを防ぎます。

最初のタイプ (あいまい検索など) では、ユーザーが入力を続けています。入力が終了したら検索を実行してもらいたいのですが、入力がいつ終了するかわからないため、ユーザーが一定期間入力していないとみなします。彼が「終了」と入力したときの時間

function generateDebounce(fn, delay) {
    let timer
    let args
    return function() {
        args = arguments
        window.clearTimeout(timer)
        timer = window.setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

2 番目のタイプの手ぶれ補正は、ログイン ボタンをクリックし、誤って複数回クリックしてしまいます。これは比較的簡単です。

let loading = false
async function onClickLogin() {
    if (loading) return
    loading = true
    const result = await login(/** ...someArgs */)
    loading = false
}

スロットル機能

名前が示すように、トラフィックを節約します。これは手ぶれ補正に非常に似ていますが、違いは、意図的なものであることです。スクロール バー イベントなど、一定の間隔で連続実行メソッドが実行されることを期待しています。画像の遅延読み込み。リアルタイムの比較が必要です。スクロール バーの位置ですが、各比較を実行する必要はありません。ユーザーが連続的に見えるようにするだけで済みます。

function generateThrottled(delay, callback) {
  let timer
  let args
  return function throttled() {
    args = arguments
    if (timer) return
    timer = window.setTimeout(() => {
      callback(...args)
      timer = null
    }, delay)
  }
}