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

概念と例

関数 debounce(debounce)

イベントがトリガーされてから n 秒後にコールバックを実行します。 n 秒以内に再度トリガーすると、時間がリセットされます。

1 つ (栗) を見てください:

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
let inputa = document.getElementById('unDebounce')
inputa.addEventListener('keyup', function (e) {
    ajax(e.target.value)
})

コードをコピーして、実行結果を見てください:

次のことがわかります。キーボードを押すだけで、この ajax リクエストがトリガーされます。これはリソースの無駄であるだけでなく、実際のアプリケーションでは、ユーザーは完全な文字を出力した後でのみリクエストを行います。最適化しましょう:

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
    
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
    })

コードをコピーして実行結果を見てください:

ご覧のとおり、手ぶれ補正を追加した後は、頻繁に入力する場合、リクエストは送信されず、指定された間隔内に入力がなかった場合にのみ機能が実行されます。入力が停止された後、指定された間隔内に再度入力があった場合、タイミングは再トリガーされます。

別のコードを見てください:

let biu = function () {
    console.log('biu biu biu',new Date().Format('HH:mm:ss'))
}
let boom = function () {
    console.log('boom boom boom',new Date().Format('HH:mm:ss'))
}
setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)

コードをコピーして、実行結果を見てください:

これは、適切な説明です。タイムインターバル関数内で実行されると、タイミングがリトリガーされます。 biuは最初の1.5秒実行後1秒ごとに実行されますが、boomは一度も実行されません。時間間隔は 2 秒、実行時間は 1 秒であるため、タイミングは毎回再トリガーされます。

関数アンチシェイクについての私の個人的な理解は、メイジがスキルを送信するときにバーを読み取る必要があるということです。バーが読み終わっていない場合は、もう一度スキルを押してください。記事を再読み込みします。

関数スロットル (スロットル)

関数は単位時間内に 1 回だけトリガーできると規定されています。この単位時間内に関数が複数回トリガーされた場合、有効になるのは 1 つだけです。

その 1 つを見てください:

function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }
    let throttleAjax = throttle(ajax, 1000)
    let inputc = document.getElementById(&#39;throttle&#39;)
    inputc.addEventListener(&#39;keyup&#39;, function(e) {
        throttleAjax(e.target.value)
    })

コードをコピーして、実行結果を見てください:

これを続けると、それがわかります。 input, ajax will 設定した時間に従って 1 秒ごとに実行されます。

biubiubiu が言ったことと組み合わせると:

    let biubiu = function () {
        console.log('biu biu biu', new Date().Format('HH:mm:ss'))
    }
    setInterval(throttle(biubiu,1000),10)

設定した実行時間間隔がどれほど短くても、常に 1 秒に 1 回だけ実行されます。 。

個人的理解: ファンクションスロットルとはFPSゲームの連射速度のことで、マウスを押し続けて射撃しても指定された連射速度の範囲内でしか弾が発射されません。

概要

関数手ぶれ補正と関数スロットリングはどちらも、特定の時間に頻繁にトリガーされるのを防ぎますが、この 2 つの兄弟の原理は異なります。

ファンクションアンチシェイクは一定時間内に1回のみ実行されますが、ファンクションスロットリングは一定間隔で実行されます。

アプリケーション シナリオと組み合わせる

debounce

Lenovo を検索し、手ぶれ補正を使用して、ユーザーが連続的に値を入力するときに要求リソースを節約します。

ウィンドウのサイズ変更がトリガーされるとき、ブラウザー ウィンドウのサイズを常に調整すると、このイベントが継続的にトリガーされます。一度だけトリガーされるようにするには、手ぶれ補正を使用してください。

throttle

マウスをオンにし続ける クリックしてトリガー、マウスダウン (単位時間あたり 1 回のみトリガー)

#下までスライドして自動的にさらに読み込むかどうかなどのスクロール イベントをリッスンし、スロットルを使用して判断します

以上がJS 手ぶれ補正とスロットリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。