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 results-driven B2B marketing consultant with 15+ years of experience helping businesses boost online visibility, generate qualified leads, and increase sales. Specializing in SEO, HubSpot, and PPC campaign management, Jake leverages proven strategies to deliver measurable growth. As a Certified Google Ads Specialist and HubSpot Developer, he is committed to driving impactful results for his clients.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter