Vergessen Sie nie wieder Debounce und Throttle. Visualisieren Sie sie – Codepen inklusive

Dies ist nicht nur ein weiterer Artikel, der versucht zu erklären, wie Debounce oder Throttling auf Codeebene funktioniert, sondern es handelt sich vielmehr um eine Veranschaulichung, um sich das Konzept zu merken und zu visualisieren, damit Sie es praktisch bei Ihrer Arbeit anwenden können.

Ich persönlich vergesse oft die Konzepte der Entprellung und Drosselung. Wenn mich also jemand bittet, sie zu erklären – oder wenn in einem Interview eine Frage auftaucht – blinzele ich einfach ?. Um das zu vermeiden, habe ich eine einfache Seite erstellt, um mein Gedächtnis aufzufrischen. Wenn Sie sich nicht wie ein Betrüger fühlen möchten, folgen Sie uns ?.

Im folgenden Codepen habe ich die Verzögerung sowohl für die Entprellung als auch für die Drosselung auf 2 Sekunden eingestellt. Versuchen Sie, auf zufällige Lebensmittel zu klicken und eine Pause einzulegen.

Index

• Die Restaurant-Analogie
• Erklärung
  • Warum überhaupt Debounce oder Throttle?
  • JS-Ereignishandler
  • Was ist los?
  • Entprellen
  • Gashebel

Link zur Seite

ashiqsultan.github.io

GitHub-Link

Restaurant-Analogie

Stellen Sie sich vor, Sie sind in einem Restaurant und möchten etwas Essen bestellen, also wählen Sie die Speisekarte vom Tisch aus und beginnen einfach, alle Artikel zu lesen. (Auf der Webseite, die ich geteilt habe, ist das Klicken auf verschiedene Lebensmittel gleichbedeutend mit dem Lesen des Menüpunkts.)

Die Analogie hier

• ? Lebensmittel lesen = ? Klicken Sie auf die Schaltfläche
• ?‍? Kellner geht in die Küche = ? API-Aufruf

Und stellen Sie sich vor, dass es im Restaurant drei verschiedene Arten von Kellnern gibt, die Sie bedienen könnten:

1. ?‍♂️ Normaler Kellner

   • Nimmt jedes Mal Notiz, wenn Sie einen Artikel erwähnen
   • Läuft für jeden einzelnen Artikel in die Küche
   • Wie JS, der jedes einzelne Ereignis sofort behandelt

2. ? Entprellter Kellner

   • Wenn Sie mit dem Lesen der Speisekarte beginnen, wartet er darauf, dass Sie mindestens 2 Sekunden innehalten, bevor er die Bestellung entgegennimmt.
   • Zum Beispiel darauf zu warten, dass ein Benutzer mit der Eingabe fertig ist, bevor er einen API-Aufruf durchführt

3. ?‍? Gedrosselter Kellner

   • Bestellungen werden nur alle 2 Sekunden entgegengenommen
   • Wenn Sie innerhalb dieser 2 Sekunden mehrere Elemente erwähnen, werden sie alle in derselben Reihenfolge angezeigt
   • Zum Beispiel die Beschränkung von API-Aufrufen auf einmal alle X Sekunden, unabhängig von der Benutzeraktivität

Hinweis: Der Hauptunterschied ist:

• Entprellen: Wartet darauf, dass die Aktivität (Schaltflächenklick) für eine bestimmte Zeit STOPPT, um auszulösen
• Drosselung: Wird in REGELMÄßIGEN Abständen ausgelöst, unabhängig davon, wann eine Aktivität gestoppt wird
• Auch 2 Sekunden sind nur etwas, das ich als Beispiel verwendet habe, es kann ein beliebiger Zeitraum sein

Erläuterung

Warum überhaupt Debounce oder Throttle?

Bevor wir Debounce oder Throttle verstehen, müssen wir wissen, warum sie überhaupt verwendet werden. Wenn wir das wissen, können wir das Verhalten von JS-Ereignishandlern verstehen

Event-Handler in JS

In JS sind Event-Handler einfach Funktionen, die ausgeführt werden, wenn bestimmte Ereignisse (wie Klicks, Eingabe oder Scrollen) auftreten. Standardmäßig werden diese Handler jedes Mal ausgelöst, wenn das Ereignis eintritt – bei jedem Tastendruck, jedem Klick oder jeder Scrollbewegung.

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

Was ist los?

Angenommen, Sie haben eine Schaltfläche, die einen API-Aufruf ausführt

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

Die obige Funktion führt makeApiCall() bei jedem Tastenklick aus (d. h.) Wenn Sie es schaffen, innerhalb von 1 Sekunde 10 Mal darauf zu drücken, schätzen Sie, was Sie in 1 Sekunde für 10 API-Aufrufe gemacht haben. Dies ist das Standardverhalten.

Das Auslösen eines API-Aufrufs jedes Mal für ein Ereignis kann jedoch ineffizient sein und ist in den meisten Fällen nicht das, wonach Sie suchen. Hier kommen Drosselung und Entprellung ins Spiel.

Wenn Sie eine Definition aus diesem Artikel übernehmen möchten, ist dies möglicherweise die richtige. Drosseln und Entprellen sind zwei gängige Methoden, um die Antwortrate eines Event-Listeners zu steuern.

Entprellen

Ich werde den Code zum Entprellen nicht erklären, da dieser einfach aus lodash importiert werden kann, sondern wir werden sehen, wo Sie ihn tatsächlich verwenden können.

Verwenden Sie Entprellen, wenn Sie den API-Aufruf nur dann durchführen möchten, wenn der Benutzer für eine bestimmte Zeitspanne mit der Eingabe aufgehört oder für eine bestimmte Zeitspanne mit dem Klicken aufgehört hat.

Wenn der Benutzer in unserem Beispiel auch nur 5 Minuten lang auf die Schaltfläche klickt, wird der API-Aufruf nur einmal durchgeführt.

Hier passieren also zwei Dinge:

• Benutzer muss aufhören zu klicken.
• Aufhören zu klicken bedeutet, dass mindestens 2 Sekunden lang kein Klicken auf die Schaltfläche erfolgen sollte.

Gaspedal

Gas ist wie ein Intervall. Verwenden Sie dies, wenn Sie nicht warten möchten, bis der Benutzer stoppt, sondern in jedem Intervall, beispielsweise 2 Sekunden, einen API-Aufruf tätigen möchten

Wenn der Benutzer beispielsweise 1 Minute lang ohne Pause tippt, rufen Sie alle 2 Sekunden die API auf.

Abschluss

Wie im Artikel erwähnt, dient dies nicht dazu, die Funktionsweise der Funktionen zu erklären, sondern vielmehr zu veranschaulichen und zu verstehen, warum sie verwendet werden. Ich würde Ihnen sicherlich empfehlen, auf Codeebene zu verstehen, wie sie funktionieren, würde aber persönlich trotzdem die von der Lodash-Bibliothek bereitgestellte Entprell- und Drosselfunktion verwenden und das Rad nicht neu erfinden.

Wenn Ihnen der Artikel gefällt, hinterlassen Sie einen Daumen nach oben, das würde mich wirklich motivieren, mehr zu schreiben. Danke ?.

Das obige ist der detaillierte Inhalt vonVergessen Sie nie wieder Debounce und Throttle. Visualisieren Sie sie – Codepen inklusive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!