I found this useful snippet here on Stack Overflow, super useful for when you need to fire an event only after the user is done resizing the window, or other events. Works great.

NOTE: Since this CodePen script is in an iframe, it will only work if you resize the window enough to make the iframe change widths. Click Here to view it on CodePen without an iframe.


var waitForFinalEvent = (function() {
var timers = {};
return function(callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();

// Usage
$(window).resize(function() {
var output = $('.output');
$(output).text('RESIZING…');
// Wait for it…
waitForFinalEvent(function() {
$(output).text('EVENT FIRED!');
//…
}, 500, "some unique string");
});

See the Pen Fire event after window resize is complete by William (@bigwilliam) on CodePen.
0

5 responses to “jQuery fire event AFTER window resize is completed

  1. hi ! i copy your code ! when after resize i call my function process addclass() for element by width page ! but not work !

  2. I copied the code exactly and it doesn’t seem to work, is there any practical example you have in a working page?

Leave a Reply

Your email address will not be published.