I am calling a function when the window is resized like this:
window.addEventListener("resize", calculateDimensions());
But I need a way to call a different function AFTER the window has been resized. Is there any way to achieve this using native js (not jquery)
TIA
You could set a Timeout and reset it when resize is fired again. So the last timeout isnt canceled and the function is run:
function debounce(func){
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func,100,event);
};
}
Usable like this:
window.addEventListener("resize",debounce(function(e){
alert("end of resizing");
}));
I like Jonas Wilms nifty little debounce function, however I think it would be nicer to pass the debounce time as a param.
// Debounce
function debounce(func, time){
var time = time || 100; // 100 by default if no param
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func, time, event);
};
}
// Function with stuff to execute
function resizeContent() {
// Do loads of stuff once window has resized
console.log('resized');
}
// Eventlistener
window.addEventListener("resize", debounce( resizeContent, 150 ));
function debounce(func, time = 100){.Using npm debounce package:
npm i debounce
const debounce = require('debounce');
window.onresize = debounce(resize, 200);
function resize(e) {
console.log('height', window.innerHeight);
console.log('width', window.innerWidth);
}
window.addEventListener("resize", calculateDimensions);calculateDimensions()means that you execute the function and then use that result as a callback function.