JS 手ぶれ補正とスロットリング-jsチュートリアル-php.cn

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

Guanhui

リリース： 2020-05-02 13:08:10

転載

2185 人が閲覧しました

概念と例

関数 debounce(debounce)

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

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

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

ログイン後にコピー

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

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

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

//模拟一段ajax请求
function ajax(content) {
  console.log(&#39;ajax request &#39; + 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(&#39;debounce&#39;)
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener(&#39;keyup&#39;, function (e) {
        debounceAjax(e.target.value)
    })

ログイン後にコピー

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

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

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

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

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

ログイン後にコピー

コードをコピーして、実行結果を見てください:
JS 手ぶれ補正とスロットリング

これは、適切な説明です。タイムインターバル関数内で実行されると、タイミングがリトリガーされます。 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)
    })

ログイン後にコピー

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

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

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

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

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

ログイン後にコピー

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