Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Javascript: Window Resize optimieren
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