<h1>Resize the window and view the developer tools console</h1>

// 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 WITH DELAY :)');
    delayedFunctions();
  }, 500);
};


$(window).on('resize', function(){
      console.log('Window Resize NO DELAY :(');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js