Scroll-Trigger während einer Scroll-Animation verhindern (jQuery.appear.js)?

Question

Verwendung: jQuery.appear.js und countUp.js Plugins

Ich bin ein Problem bekommen, wenn der Benutzer blättert, wird das Ereignis immer wieder ausgelöst zu werden. Ich habe es auch ohne das jQuery.appear Plugin versucht und on.scroll(function(){}); verwendet, aber ich bekomme das gleiche Ergebnis. Jedes Scroll-Ereignis vor Abschluss der Animation löst die Animation aus und verursacht eine Fehlfunktion. Ich habe versucht, $(window).unbind('scroll');, die funktioniert, aber dann bricht jede andere On-Scroll-Animation.

Wie kann ich verhindern, dass Scroll-Ereignisse die Animation auslösen, während die Animation noch läuft?

Auschecken https://jsfiddle.net/efqhgg5L/. Wenn Sie während des Tickens weiter um die Zahlen scrollen, wird die Animation nicht abgeschlossen.

Answer 1

Das Problem liegt darin, wie oft das appear Ereignis ausgelöst wird, und es wird ständig ausgelöst, während Sie blättern (ich nehme an, dass so jquery.appear.js codiert ist). Durch Ändern der Ereignisbindung von $(document.body).on('appear', ...) auf $(document.body).one('appear',...) (on vs. eins) wird das Ereignis nur beim ersten Mal ausgelöst. Da Sie delegierte Ereignisbehandlung verwenden (das Ereignis zum Dokumentieren festlegen und dann nach dem Ereignisziel suchen), wird es nur für den ersten Zähler ausgelöst, der angezeigt wird.

Lösung 1: Sie könnten Ihre eigene Logik implementieren, wo Sie die Zähler, die bereits erschienen sind, verfolgen und wenn das Erscheinen-Ereignis auf einem Zähler ausgelöst wird, der bereits erschien, bevor Sie die .animate erneut ausführen. Dies kann entweder durch Speichern des Zustands (so wie es anfänglich erschien) für jeden Zähler durchgeführt werden.

Lösung 2: Oder, wahrscheinlich der einfachere Weg, fügen Sie eine Klasse hinzu, sobald ein Zähler mit der Animation beginnt und diese Klasse z. jQuery's hasClass und return bevor wieder .animate läuft.