JavaScript-Entprellung
-
JavaScript
debounceFunktionsmechanismus -
Verwenden Sie die
lodash debounce-Methode für eine bessere Leistung
Die Funktion debounce drive ist keine explizite Methode, die mit den Selektoren instanziiert werden kann. Seine Definition umfasst einen Timer, eine zurückgegebene Funktion und die Kontexte.
Abgesehen von diesem expliziten debounce haben wir jQuery debounce, lodash debounce und underscore.js debounce. Zur Visualisierung setzen wir die Beispiele im folgenden Abschnitt.
Der Use Case ist wohl im Fall des jQuery debounce veraltet. Es gibt eine große Auswahl an Diskussionen und Demonstrationen, die online verfügbar sind, aber die früheren und neuesten Versionen von jQuery geben keine Ausgabe; Stattdessen sagt die Implementierung, dass die Funktion $.debounce nicht existiert.
Wir werden hier jedoch zwei Beispiele mit der grundlegenden Implementierung des debounce-Mechanismus und der lodash debounce-Methode untersuchen. lodash wird über die underscore.js-Konvention betrachtet.
Wir konzentrieren uns also auf die Lodash-Entprellung. Trotz des Grundsystems für diese Funktion kann es auch einige andere Parameter annehmen.
Dies dient auch der besseren Performance. Sie können zu diesem Portal weiterleiten, um lodash debounce besser zu verstehen.
JavaScript debounce Funktionsmechanismus
Die grundlegende Notwendigkeit der Verwendung der Entprellfunktion besteht darin, unerwünschte Aktionen zu reduzieren und somit die Funktionsverzögerung zu begrenzen. Nun könnte sich die Frage stellen, wie dies durch eine Verzögerung zu einer besseren Leistung führt.
Nun, betrachten wir eine Alarm-Methode des Fensters. Was passiert ist, dass wenn wir auf eine ausgelöste Schaltfläche klicken, die der Warnung entspricht, diese ausgelöst wird.
Wenn der Benutzer den Klick jedoch prompt nacheinander wiederholt, sehen Sie, dass die Warnmeldung eine ungleichmäßige Vorschau oder nur eine Anrufaktion anzeigt. Das liegt an mangelnder Leistung.
Auf jeden Klick oder Trigger folgt eine Akzeptanzzeit des Signals und abhängig davon wird die Restaktion ausgelöst. Wenn wir in ein Suchfeld tippen, liefert jeder Tastendruck aktualisierte gefilterte Ergebnisse.
Dies ist auch eine Implementierung dieser debounce-Funktion, die besagt: “Egal wie oft Sie mich anklicken oder mich auslösen, ich werde erst nach der Zeit arbeiten, zu der ich aufgefordert werde, zu verzögern”. Wenn also jemand abrupt auf eine Schaltfläche klickt, zeigt er seine Funktion nach der erwähnten Zeitverzögerung an.
Hier in der Instanz haben wir einen Timer, der jedes Mal gelöscht wird, wenn die Funktion ausgelöst wird. Und wenn ein weiterer Klick gerichtet ist und die Zeitverzögerung größer als die Differenz zwischen den Klicks ist, setzt die Funktion die Zeitzählung erneut zurück.
Und folgt dem letzten Klick und beginnt mit dem Zählen der Zeit und einer Vorschau der Aufgabe.
Code-Auszug:
<html>
<body>
<button id="db">Debounce</button>
<script>
var btn = document.getElementById("db");
const debounce = (func, delay) => {
let Timer
return function() {
clearTimeout(Timer)
Timer
= setTimeout(() => func.apply(this, arguments), delay)
}
}
btn.addEventListener('click', debounce(function() {
alert("Executing after a sec!!")
}, 1000));
</script>
</body>
</html>
Ausgang:
Unsere Entprellen-Funktion benötigt also zwei Parameter, die Zeitverzögerung und den Kontext. Bei jedem Anruf wird die Zeitverzögerung gelöscht und beginnt von neuem.
Somit ist eine gewisse Zeitverzögerung gewährleistet, und trotz des Benutzerverhaltens auf der Triggerfunktion gibt die interne Entprellung eine entprellte Funktion zurück, die nichts anderes ist als die Funktion, an der wir arbeiten, begrenzt durch einen Zeitrahmen.
Verwenden Sie die lodash debounce-Methode für eine bessere Leistung
In dieser angegebenen lodash-Bibliothek haben wir eine vordefinierte _.debounce-Methode, die die Funktion, die Verzögerung und einen weiteren optionalen Parameter übernimmt. Daher müssen wir die klaren und zeitlich festgelegten Einschränkungen nicht explizit definieren.
Vielmehr ist es abstrahiert, und wir können die Entprellfunktion ausführen, indem wir es einfach aufrufen.
Code-Auszug:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="db">Debounce</button>
<script>
var db = document.getElementById("db");
var debounce = _.debounce(function(){
alert("Wait for a sec!")
}, 1000, {'leading':false})
db.addEventListener('click', debounce);
</script>
</body>
</html>
Ausgang:
