Zurück zur Übersicht

Javascript: Window Resize optimieren

#Tutorials#Javascript

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

// window.resize callback function
function resizeFunction() {
  // calls many many times
  // do anything
}

// listen for window.resize
window.addEventListener('resize', resizeFunction);

// call once to initialize page
resizeFunction();

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.

let throttled = false; // are we currently throttled?
let delay = 250; // ms between calls

// window.resize callback function
function resizeFunction() {
  // do anything
}

// window.resize event listener
window.addEventListener('resize', () => {
  // only run if we're not throttled
  if (!throttled) {
    // actual callback action
    resizeFunction();
    // we're throttled!
    throttled = true;
    // set a timeout to un-throttle
    setTimeout(function() {
      throttled = false;
    }, delay);
  }  
});

resizeFunction();

 

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.

let timeout = false; // holder for timeout id
let delay = 250; // delay after event is "complete" to run callback

// window.resize callback function
function resizeFunction() {
  // do anything
}

// window.resize event listener
window.addEventListener('resize', () => {
  // clear the timeout
  clearTimeout(timeout);
  // start timing for event "completion"
  timeout = setTimeout(resizeFunction, delay);
});

resizeFunction();

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


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.