Bootstraphunter

Throttle or Delay JavaScript Functions When Window is Resized [code snippet]

• John Brown
• July 14, 2021

Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.

// delay function to use on resize to prevent multiple resize events
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();

// Add the delayed functions here
const delayedFunctions = function () {
console.log(‘delayedFunctions running’);
}

// document ready
$( document ).ready(function() {
// delayedFunctions on load
delayedFunctions();
});

// window resize
window.onresize = function(event) {
delay(function(){
console.log(‘Window Resize…’);
delayedFunctions();
}, 500);
};

The post Throttle or Delay JavaScript Functions When Window is Resized [code snippet] appeared first on Bootstrap Creative.