Schneller Tipp: Wie man Scroll -Ereignisse drosselt

Schlüsselpunkte

• Hören von Scroll -Ereignissen kann die Leistungsverschlechterung verursachen, da der Browser jedes Mal, wenn der Benutzer scrolls, eine Rückruffunktion ausführt. Drosselklaser sorgt für einen ständigen Ereignisfluss über ein bestimmtes Zeitintervall, während das Abbau eine Reihe von Ereignissen zu einem einzigen Ereignis kombiniert.
• Implementieren von Ereignisdrosseln in JavaScript kann kompliziert werden, und es wird empfohlen, eine Implementierung von Drittanbietern wie Lodash zu verwenden, was der Standard für das Ereignis-Drossel ist. Lodashs Drosselungsfunktion vereinfacht das Rolling -Ereignis -Drossel und bietet Optionen, um festzustellen, ob die Rückruffunktion vorne und/oder die hintere Kante des Ereignisses ausgeführt wird.
• Der Schlüssel zur Auswahl von Droseln und Enttäuschung besteht darin, die Art des Problems zu erkennen. Gas gilt für Ereignisse, die innerhalb einer bestimmten Zeitspanne auftreten, wie z. B. Scrollen, während Downounce für Ereignisse wie Schlüsselpressen gilt, bei denen das Intervall zwischen Ereignissen nicht wichtig ist.

Dieser Artikel wurde von Vildan Softic und Julian Motz überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte für den Besten erhalten haben!

Eine der Gefahren des Hörens von Scroll -Ereignissen ist die Leistungsverschlechterung. Der Browser führt jedes Mal eine Rückruffunktion aus, wenn der Benutzer scrolls, das viele Ereignisse pro Sekunde haben kann. Wenn die Rückruffunktion eine Menge neuer Operationen ausführt, bedeutet dies schlechte Nachrichten für den Endbenutzer. Das Wiederieren ist teuer, insbesondere wenn der größte Teil der Ansicht neu gezogen wird, beispielsweise wenn ein Bildlaufereignis auftritt.

Das folgende Beispiel zeigt dieses Problem:

Beispiel auf CodePen anzeigen: Unbeschwerte Bildlaufereignisse

Neben der Leistungsverschlechterung und anfällig für Anfälle. Dieses Beispiel zeigt, was passiert, wenn der Computer genau Ihren Anweisungen folgt. Es gibt keinen reibungslosen Übergang zwischen Hintergrundfarben, der Bildschirm blinkt nur. Jeder unglückliche Programmierer könnte das Gefühl haben, dass es auf dieser Welt keine Hoffnung gibt. Gibt es keinen besseren Weg?

Standardereignisse

Eine Lösung besteht darin, Ereignisse zu verschieben und mehrere Ereignisse gleichzeitig zu verwalten. Es gibt zwei häufig verwendete Funktionen, die uns helfen können, dies zu tun: Drosselung und Enttäuschung.

Vertrauen sorgt für einen ständigen Ereignisfluss über ein bestimmtes Zeitintervall, während das Abbau eine Reihe von Ereignissen zu einem einzigen Ereignis kombiniert. Eine Denkweise ist, dass das Droseln auf der Zeit basiert, während Dobounce auf der Veranstaltung basiert. Es wird garantiert garantiert, dass ein Drossel der Drossel ausgeführt wird, während De-Jitter nach dem Auftreten des Pakets nicht garantiert ausgeführt wird. Wenn Sie mehr darüber erfahren möchten, lesen Sie bitte diese eingehende Diskussion über das Entfernen und Drossel.

De-Shaking

Dobounce löst verschiedene Probleme, wie z. B. Schaltflächen mit Ajax. Warum eine Anfrage für jeden Tastendruck senden, wenn Sie etwas in einem Formular eingeben? Eine elegantere Lösung besteht darin, eine Reihe von Schlüssel zu einem Ereignis zu kombinieren, das eine AJAX -Anfrage auslöst. Dies entspricht dem natürlichen Tippprozess und spart Serverressourcen. Für Tastendrucke ist das Intervall zwischen Ereignissen nicht wichtig, da der Benutzer nicht mit konstanter Geschwindigkeit eintippt.

Vertrauen

Da es keine Garantie für die Entlassung gibt, besteht eine andere Methode darin, das Rolling -Ereignis zu drosseln. Das Scrollen tritt innerhalb einer bestimmten Zeitspanne auf, sodass es angemessen ist, zu drosseln. Sobald der Benutzer mit dem Scrollen beginnt, möchten wir eine rechtzeitige Ausführung sicherstellen.

Diese Technik hilft zu überprüfen, ob wir uns in einem bestimmten Teil der Seite befinden. Angesichts der Größe der Seite dauert es viele Sekunden, bis der Inhalt durch den Inhalt scrollen kann. Dies ermöglicht das Drossel, Ereignisse nur einmal innerhalb eines bestimmten Intervalls auszulösen. Event Throcking macht das Scrolling -Erlebnis reibungsloser und sorgt für die Ausführung.

Folgendes ist ein einfaches Ereignis -Drosselklaser in nativem JavaScript:

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

Diese Implementierung legt eine Zeitvariable fest, die den Moment nachverfolgt, in dem die Funktion zum ersten Mal aufgerufen wird. Jedes Mal, wenn die zurückgegebene Funktion aufgerufen wird, überprüft sie, ob das Wartenintervall vergangen ist. Wenn ja, löst sie den Rückruf aus und setzt die Zeit zurück.

Ansehen Sie das Beispiel auf CodePen: native JS -Drosselung

Benutzerbibliothek

Es gibt viele Gefahren beim Throcking von Veranstaltungen, und es wird nicht empfohlen, es selbst zu schreiben. Anstatt Ihre eigene Implementierung zu schreiben, empfehle ich, eine Drittanbieter-Implementierung zu verwenden.

lodash

Lodash ist der De -facto -Standard für das Ereignis in JavaScript. Diese Bibliothek ist Open Source, sodass Sie den Code nach Belieben durchsuchen können. Der Vorteil ist, dass die Bibliothek modular ist, sodass Sie das bekommen können, was Sie wollen.

Verwenden von Lodashs Drosselungsfunktion, Rolling Event Throcking wird einfach:

window.addEventListener('scroll', _.throttle(callback, 1000));

Dies begrenzt das eingehende Rolling -Ereignis Torrent auf einmal alle 1000 Millisekunden (eine Sekunde).

Die

API bietet wie folgt vordere und hintere Kantenoptionen:

_.throttle(callback, 1, { trailing: true, leading: true });

Diese Optionen bestimmen, ob die Rückruffunktion vorne und/oder die Rückkante des Ereignisses ausgeführt wird.

Ein Problem hierfür ist, dass die Rückruffunktion, wenn Sie sowohl die Vorderseite als auch die Rückkante auf False einstellen, nicht ausfeuert. Wenn Sie die vordere Kante auf True setzen, wird die Callback -Ausführung sofort gestartet und dann drosselt. Dies stellt die Ausführung für jedes Intervall sicher, wenn Sie sowohl die Vorder- als auch die nachfolgenden Kanten auf true einstellen.

Zeigen Sie die Demo auf CodePen an: Drosselklappenereignis

Als ich den Quellcode betrachtete, fand ich interessant, dass Throttle () nur ein Wrapper für Dunounce () ist. Drosselklaser überträgt einfach einen anderen Satz von Parametern, um das gewünschte Verhalten zu ändern. Gas setzt einen Maxwait, wodurch die Ausführung garantiert wird, sobald Sie auf diese lange warten. Der Rest der Implementierung bleibt gleich.

Ich hoffe, Sie finden Lodash gut für Sie in Ihrem nächsten Event -Throcking -Abenteuer!

Schlussfolgerung

Der Schlüssel zum Drossel und zur Entfernung ist, die Art des zu lösenen Problems zu überprüfen. Diese beiden Technologien sind für verschiedene Anwendungsfälle geeignet. Ich schlage vor, die Frage aus der Sicht des Benutzers zu betrachten, um die Antwort zu finden.

Der Vorteil der Verwendung von Lodash besteht darin, dass es in einer einfachen API viel Komplexität abstrahiert. Die gute Nachricht ist, dass Sie in Ihrem Projekt _.throttle() verwenden können, ohne die gesamte Bibliothek hinzuzufügen. Es gibt Lodash-Cli, ein Tool, mit dem Sie nur benutzerdefinierte Builds erstellen können, die die erforderlichen Funktionen enthalten. Event Throcking ist nur ein kleiner Teil der gesamten Bibliothek.

FAQs über Drosselungsveranstaltungen (FAQ)

• Was ist der Zweck der Drosselung von Rolling -Ereignissen in JavaScript?

Vertrauensrollereignisse in JavaScript ist eine Technologie, mit der die Leistung einer Website oder einer Webanwendung optimiert wird. Wenn ein Benutzer auf einer Webseite scrollt, generiert der Browser ein Bildlaufereignis für die Bewegung jedes Pixels. Dies kann zu Hunderten oder sogar Tausenden von Ereignissen führen, die pro Sekunde generiert werden, was die Leistung der Webseite stark verschlechtern kann. Durch das Treiben dieser Ereignisse können wir die Anzahl der zu verarbeitenden Ereignisse einschränken und so die Leistung und Reaktionsfähigkeit der Webseiten verbessern.

• Wie funktioniert das Droseln in JavaScript?

Vertrauen in JavaScript funktioniert, indem eine Verzögerung zwischen Ereignisausführungen festgelegt wird. Wenn ein Ereignis ausgelöst wird, startet der Timer. Wenn ein anderes Ereignis ausgelöst wird, bevor der Timer endet, wird das Ereignis ignoriert. Dies stellt sicher, dass eine bestimmte Zeit verabschiedet werden muss, bevor ein anderes Ereignis verarbeitet wird. Diese Technik ist besonders nützlich für häufig ausgelöste Ereignisse wie Scrollenereignisse.

• Was ist der Unterschied zwischen Drossel und De-Schütteln?

Vertrauen und Entladen sind Techniken, mit denen die Häufigkeit, mit der eine Funktion im Laufe der Zeit ausgeführt werden kann, einschränken. Der Hauptunterschied zwischen beiden besteht darin, wie sie mit der Latenz umgehen. Gasverstärker stellt sicher, dass die Funktion nicht mehr als einmal in jeder x Millisekundenbezogenen als Downounce sicherstellt, dass die Funktion nicht aufgerufen wird, wenn x Millisekunden seit dem letzten Anruf verstrichen ist. Mit anderen Worten, das Droseln führt die Funktion in regelmäßigen Abständen aus, während Dobounce die Funktion nach einer Zeit der Inaktivität ausführt.

• Wie erhalte ich JavaScript -Drossel?

Die setTimeout -Funktion kann verwendet werden, um JavaScript zu drosseln. Mit dieser Funktion können Sie die Ausführung der Funktion durch eine bestimmte Anzahl von Millisekunden verzögern. Durch die Verwendung von setTimeout mit Ereignishörern können Sie sicherstellen, dass die Event -Handler -Funktion nicht mehr als einmal alle x Millisekunden bezeichnet wird.

• Kann ich neben Scrollenereignissen neben anderen Ereignissen das Drossel mit anderen Ereignissen verwenden?

Ja, das Droseln kann mit jeder Art von Ereignis in JavaScript verwendet werden, nicht nur mit Scrollenereignissen. Es ist besonders nützlich für Ereignisse, die häufig ausgelöst oder umfangreiche Verarbeitung erfordern, wie z. B. Mausbewegungsereignisse, Ereignisse der Größe der Größenänderung und Ereignissen von Schlüsselpresse.

• Gibt es eine Bibliothek oder ein Framework, das eine integrierte Unterstützung für das Droseln bietet?

Ja, es gibt mehrere Bibliotheken und Frameworks, die eine integrierte Unterstützung für das Droseln bieten. Zum Beispiel bietet die beliebte JavaScript -Utility Library Lodash eine Drosselungsfunktion, mit der das Throcking leicht implementiert werden kann. In ähnlicher Weise bietet die beliebte JavaScript -Bibliothek JQuery auch eine Drosselungsfunktion in seiner API.

• Was sind die potenziellen Nachteile des Drossels?

Während das Droseln die Leistung einer Webseite verbessern kann, kann dies auch zu einer langsamen Reaktion der Benutzererfahrung führen, wenn sie nicht ordnungsgemäß verwendet werden. Wenn die Verzögerung beispielsweise zu hoch eingestellt ist, können Benutzer eine Verzögerung zwischen ihren Vorgängen und der Antwort der Webseite feststellen. Daher ist es wichtig, ein Gleichgewicht zwischen Leistung und Reaktionsgeschwindigkeit bei der Verwendung von Drossel zu finden.

• Wie teste ich die Wirksamkeit des Drossels?

Sie können die Effektivität des Drossels testen, indem Sie die Leistung der Webseite vor und nach dem Drossel messen. Dies kann mithilfe von Browser -Entwickler -Tools erfolgen, die detaillierte Informationen zur Leistung von Webseiten enthalten, einschließlich der Zeit, die für die Verarbeitung von Ereignissen benötigt wird.

• Kann das Droseln in Kombination mit anderen Leistungsoptimierungstechniken verwendet werden?

Ja, das Droseln kann in Kombination mit anderen Leistungsoptimierungstechniken wie Downounce und requestAnimationFrame verwendet werden. Durch die Kombination dieser Technologien können Sie die Leistung und Reaktionsfähigkeit Ihrer Webseiten weiter verbessern.

• Gibt es eine Alternative zum Droseln?

Ja, es gibt mehrere Alternativen zum Droseln, einschließlich Dunounce und requestAnimationFrame. DeBounce ähnelt dem Drossel, aber anstatt die Anzahl der Funktionen zu begrenzen, kann eine Funktion im Laufe der Zeit aufgerufen werden, stellt sie sicher, dass die Funktion erst nach dem letzten Anruf aufgerufen wird, wenn eine bestimmte Zeit vergangen ist. requestAnimationFrame ist eine Methode, die dem Browser an sagt, eine Animation auszuführen, und fordert den Browser an, eine bestimmte Funktion aufzurufen, um die Animation vor dem nächsten Repaint zu aktualisieren.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Wie man Scroll -Ereignisse drosselt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!