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


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);
};



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter