Ich throttle

[Gunnar Bittersmann]

Ich habe ein Menü, das einzeilig bleibt und horizontal gescrollt wird. Dabei wird die Scrollbar ausgeblendet; dafür gibt’s Buttons für Zurückscrollen und Vorscrollen. Diese werden per JavaScript ansgeblendet, wenn man sich am Anfang bzw. Ende befindet.

Beim Scrollen feuert das scroll-Event ständig. (Irgendwo gelesen, dass es auf Smartphones noch häufiger feuert als auf „Großrechnern“.) Die Eventhandlerfunktion sollte daher in ihrer Ausführung beschränkt werden.

Besser als nichts: mit requestAnimationFrame. Damit ist die Ausführung aber immer noch häufiger als nötig. Man sollte Debouncing oder Throttling implementieren.^[1][2][3][4]

Mit Debouncing funktioniert’s, liefert aber nicht das gewünschte Ergebnis: Das Ein-/Ausblenden eines Pfeils erfolgt erst eine gewisse Zeit, nachdem man mit Scrollen aufgehört hat, nicht schon währenddessen.

Das sollte also mit Throttling gemacht werden. Funktioniert aber nicht. Kann mir jemand sagen, warum nicht?

🖖 Живіть довго і процвітайте

---

1. The Difference Between Throttling and Debouncing by Chris Coyier ↩︎

2. Debouncing and Throttling Explained Through Examples by David Corbacho ↩︎

3. Optimizing window.onresize by Ben Centra ↩︎

4. Debounce vs Throttle: Definitive Visual Guide by Artem Zakharchenko ↩︎