Javascript Events drosseln

Hört man Javascript-Funktionen auf resize- oder scroll-Events, wird man schnell feststellen, dass es hier zu erheblichen Performance-Problemen kommen kann. Grund dafür ist, dass ein Event zu oft abgefeuert wird. Zum Beispiel beim Resizen eines Fensters: Verändert man manuell die Größe von 1000 auf 500 Pixel, wird das resize-Event 500 mal gefeuert. Wenn nun in diesem Zyklus jede Menge jQuery Aktionen ausführt werden, wird man feststellen: Performant ist das nicht.

Deswegen gibt es zwei Möglichkeiten dies zu unterbinden. Die Libraries lodash und underscorejs bringen jeweils zwei Methoden. Einmal throttle und debounce.

Throttle

Das Throttle-Event "drosselt" den Aufruf einer Funktion. Throttle führt nun innerhalb eines bestimmten Zeitraums die hereingereichte Funktion aus.

Debounce

Das Debounce-Event friert wartet quasi so lange, bis das gerade ausgeführte Event beendet wurde und führt dann die hereingereichte Funktion aus.