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

Leave a Reply

Your email address will not be published. Required fields are marked *