Möchte man auf einer Webseite etwas mit Javascript je nach Bildschirmgröße verändern, so hat man einen Eventlistener auf resize. Macht man nun etwas mehr Veränderungen oder hat ein langsameres Gerät, so kommt das Javascript und der Browser schnell an seine Grenze. Ändert man die Größe, so werden sehr sehr viele Events geworfen. Hier mal ein Beispiel ohne Optimierung.

Ohne Optimierung

Nun gibt es 2 Möglichkeiten das Ganze besser zu gestalten. Einmal Throttling und einmal Debouncing.

Throttling

Beim Throttling legt man fest, wie oft das Event hintereinander geworfen werden soll. Man legt eine Zeitspanne fest, nach wie viel Milisekunden das Event nochmal gefeuert werden darf. Hier der vorherige Code um das Feature erweitert.

Debouncing

Im Gegensatz zum Throttling verlagert das Debouncing das Event nach Hinten und meistens wird es dann nur einmal geworfen. Also erst wenn der User eine Zeit lang das Fenster nicht mehr verändert wird das Event gefeuert. So kann man abwarten bis das Fenster die Größe erreicht in der der Benutzer die Webseite weiter benutzen wird.

Für welche Variante man sich auch entscheided, beide Varianten sind wohl besser als die ohne Optimierung.