Dies ist nicht nur ein weiterer Artikel, der erklärt zu erklären, wie Downounce oder Drosselung auf Codeebene funktioniert. Dies ist eine Illustration, um das Konzept zu erinnern und zu visualisieren, damit Sie sie praktisch bei Ihrer Arbeit anwenden können.

Persönlich vergesse ich oft die Konzepte des Entladung und Drossels. Wenn mich also jemand bittet, sie zu erklären - oder wenn eine Frage in einem Interview auftaucht - blinzle ich nur. Um dies zu vermeiden, habe ich eine einfache Seite gemacht, um mein Gedächtnis zu aktualisieren. Wenn Sie sich nicht wie ein Betrüger fühlen wollen, folgen Sie mit?

In der folgenden Codepen habe ich die Verzögerung auf 2 Sekunden für Downounce und Gas festgelegt. Versuchen Sie, auf zufällige Lebensmittel zu klicken und eine Pause zu geben.

Index

• Das Restaurant Analogie
• Erläuterung
  • Warum trotzdem entlarven oder drosseln?
  • JS Event Handler
  • Was ist falsch?
  • debounce
  • Gaspedal

link zu page

Github Link

Restaurantanalogie

Stellen Sie sich vor, Sie sind in einem Restaurant und möchten etwas Essen bestellen, also wählen Sie das Menü aus dem Tisch und lesen Sie einfach alle Artikel. (In der Webseite, die ich geteilt habe, entspricht das Klicken auf verschiedene Lebensmittel.

Die Analogie hier

? Lebensmittel lesen =? Schaltfläche klicken
? ‍? Kellner in die Küche gehen =? Api call

und stellen Sie sich vor, es gibt drei verschiedene Arten von Kellnern im Restaurant, die Ihnen dienen könnten:

1. ? ‍Eitung normale Kellner

   nimmt jedes Mal die Kenntnis, wenn Sie ein Element erwähnen
   rennt zur Küche für jeden einzelnen Artikel
   • Wie JS, das jedes einzelne Ereignis sofort bearbeitet

2. ? Debounced Waiter

   • Wenn Sie das Menü lesen, wartet er darauf, dass Sie mindestens 2 Sekunden lang innehalten, bevor Sie die Bestellung aufnehmen.
   • Wie das Warten darauf zu warten, dass ein Benutzer das Tippen beendet, bevor sie eine API aufrufen

3. ? ‍? Drosseliger Kellner

   • nimmt nur einmal alle 2 Sekunden Bestellungen an
   • Wenn Sie in diesen 2 Sekunden mehrere Elemente erwähnen, werden sie alle in derselben Reihenfolge gehen
   • wie die Einschränkung der API -Anrufe auf einmal alle x Sekunden, unabhängig von der Benutzeraktivität

Hinweis: Der Hauptunterschied ist:

• debouncing: wartet auf Aktivität (Schaltfläche Klick), um eine bestimmte Zeit zum Auslösen
anzuhalten
• Drosselung: Auslöser in regelmäßigen Abständen, unabhängig davon, wann eine Aktivität gestoppt wird
Auch 2 Sec ist nur etwas, das ich als Beispiel verwendet habe.

Erläuterung

Warum trotzdem entlarzen oder drosseln?

Bevor Sie Dunounce oder Gas verstehen, müssen wir wissen, warum sie überhaupt überhaupt verwendet werden. Um zu wissen, dass das Verhalten von JS -Ereignishandlern

verstehen kann

Event -Handler in JS

In JS sind Ereignishandler nur Funktionen, die ausgeführt werden, wenn bestimmte Ereignisse (wie Klicks, Tippen oder Scrollen) auftreten. standardmäßig werden diese Handler jedes Mal abfeuern, wenn das Ereignis - jeder Tastenanschlag, jeden Klick oder jede Scroll -Bewegung.
.

// 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?

Sagen Sie zum Beispiel, Sie haben einen Knopf, der eine API -Anruf
erzeugen würde

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

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

Die obige Funktion führt die makeapicall () auf jeder Schaltfläche aus. Klicken Sie auf (d.h.) Wenn Sie sie 10 Mal innerhalb von 1 Sekunden drücken, raten Sie, was Sie in 1 Sek. Dies ist das Standardverhalten.

Aber jedes Mal eine API -Anrufe für ein Ereignis zu feuern, kann ineffizient sein, und meistens ist dies nicht das, wonach Sie suchen. Hier kommen Drossel und Debouncing ins Bild.

Wenn Sie eine Definition aus diesem Artikel wegnehmen möchten, kann dies derjenige sind. Drosselung und Debouncing sind zwei häufigste Möglichkeiten, die Rücklaufquote eines Ereignishörers zu kontrollieren.

Debouncing

Ich werde den Code für das Entladung nicht erklären, da dies nur aus Lodash importiert werden kann. Wir werden sehen, wo Sie ihn tatsächlich verwenden können.

Verwenden Sie das Debouncing, wenn Sie den API nur dann aufrufen möchten, wenn der Benutzer für eine bestimmte Zeit nicht mehr tippt oder auf ein bestimmtes Zeitraum aufgehört hat.

In unserem Beispiel, wenn der Benutzer auch für 5 min gerade auf die Schaltfläche klickt, wird der API -Anruf nur einmal getätigt.

Also passieren hier zwei Dinge:

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

Gaspedal

drosseltle ist wie ein Intervall. Verwenden Sie dies, wenn Sie nicht warten möchten, bis der Benutzer in jedem Intervall eine API -Anrufe in 2 Sekunden

anhält

.

Beispiel Wenn der Benutzer 1 Minute gerade einschüttelt, ohne in der Pause zu puzentieren, würden Sie für jede 2 Sek. Rufen Sie die API an.

Abschluss

Wie im Artikel erwähnt, soll dies nicht erklären, wie die Funktionen eher dazu beitragen, zu visualisieren und zu verstehen, warum es verwendet wird. Ich würde Ihnen sicherlich empfehlen, auf Codeebene zu verstehen, wie sie funktionieren, aber persönlich den von der Lodash Library bereitgestellten Downounce und Gas verwenden und das Rad nicht neu erfinden.

Wenn Sie den Artikel mögen, hinterlassen Sie einen Daumen hoch, würde es mich wirklich motivieren, mehr zu schreiben. Danke ?.