JS Anti-Shake und Throttling

Konzepte und Beispiele

Funktion entprellen (debounce)

Führen Sie den Rückruf n Sekunden nach dem Auslösen des Ereignisses aus, falls hier vorhanden Wird innerhalb von n Sekunden erneut ausgelöst, wird die Zeit zurückgesetzt.

Sehen Sie sich eine an (Kastanie):

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

Kopieren Sie den Code und sehen Sie sich die laufenden Ergebnisse an:

Wie Sie sehen können, wir Sie müssen nur die Tastatur drücken, um diese Ajax-Anfrage auszulösen. Dies ist nicht nur eine Verschwendung von Ressourcen, sondern in tatsächlichen Anwendungen stellen Benutzer Anfragen erst, nachdem sie vollständige Zeichen ausgegeben haben. Lassen Sie es uns optimieren:

//模拟一段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)
    })

Kopieren Sie den Code und sehen Sie sich die laufenden Ergebnisse an:

Wie Sie sehen können, nachdem wir Anti-Shake hinzugefügt haben, Wenn Sie häufig sind Bei der Eingabe wird keine Anfrage gesendet und die Funktion wird nur ausgeführt, wenn Sie innerhalb des angegebenen Intervalls keine Eingabe haben. Wenn die Eingabe gestoppt, aber innerhalb des angegebenen Intervalls erneut eingegeben wird, wird die Zeitmessung erneut ausgelöst.

Schauen Sie sich ein anderes an:

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)

Kopieren Sie den Code und sehen Sie sich die laufenden Ergebnisse an:

Dies ist eine gute Erklärung, wenn sie innerhalb ausgeführt wird Bei einer Zeitintervallfunktion wird die Zeitmessung erneut ausgelöst. Biu wird alle 1 Sekunde nach der ersten 1,5-Sekunden-Ausführung ausgeführt, Boom jedoch nicht einmal. Da das Zeitintervall 2 Sekunden und die Ausführungszeit 1 Sekunde beträgt, wird das Timing jedes Mal neu ausgelöst.

Das persönliche Verständnis der Anti-Shake-Funktion ist, dass der Magier die Leiste lesen muss, wenn er die Fertigkeitsleiste sendet Wenn Sie mit dem Lesen noch nicht fertig sind, drücken Sie den Skill erneut.

Funktionsdrosselung (Throttle)

legt fest, dass die Funktion nur einmal innerhalb einer Zeiteinheit ausgelöst werden darf. Wird die Funktion innerhalb dieser Zeiteinheit mehrmals ausgelöst, wird nur einmal wirksam.

Sehen Sie sich eines an:

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)
    })

Kopieren Sie den Code und sehen Sie sich die laufenden Ergebnisse an:

Wie Sie sehen können, wenn wir fortfahren Zur Eingabe wird Ajax entsprechend der von uns festgelegten Zeit alle 1 Sekunde ausgeführt.

Kombiniert mit dem, was biubiubiu gerade gesagt hat:

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

Egal wie klein das von uns festgelegte Ausführungszeitintervall ist, es wird immer nur einmal in 1 Sekunde ausgeführt .

Persönliches Verständnis: Die Funktionsdrosselung ist die Feuerrate von FPS-Spielen. Selbst wenn Sie zum Schießen weiterhin die Maus drücken, werden Kugeln nur innerhalb der angegebenen Feuerrate abgefeuert.

Zusammenfassung

Funktion Anti-Shake und Funktionsdrosselung verhindern beide häufiges Auslösen zu einem bestimmten Zeitpunkt, aber die Prinzipien zwischen den beiden Brüdern sind unterschiedlich.

Die Funktionsstabilisierung wird nur einmal innerhalb eines bestimmten Zeitraums ausgeführt, während die Funktionsdrosselung in Intervallen ausgeführt wird.

Kombiniert mit dem Anwendungsszenario

Entprellen

Suchen Sie Lenovo. Wenn der Benutzer weiterhin Werte eingibt, verwenden Sie Anti-Shake, um Anforderungsressourcen zu sparen.

Wenn das Fenster eine Größenänderung auslöst, löst die ständige Anpassung der Größe des Browserfensters dieses Ereignis kontinuierlich aus. Verwenden Sie Anti-Shake, damit es nur einmal ausgelöst wird

Drossel

Die Maus klickt weiter Klicken zum Auslösen, Mousedown (wird nur einmal pro Zeiteinheit ausgelöst)

Überwachen Sie Bildlaufereignisse, z. B. ob nach unten geschoben werden soll, um automatisch mehr zu laden, verwenden Sie den Gashebel, um zu beurteilen

Das obige ist der detaillierte Inhalt vonJS Anti-Shake und Throttling. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!