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
Hi Big William,
Thanks for saving my hours.
hi ! i copy your code ! when after resize i call my function process addclass() for element by width page ! but not work !
Will you please post your code on pastebin.com so I can take a look?
I copied the code exactly and it doesn’t seem to work, is there any practical example you have in a working page?
Hi Eric, You could refer to the original stack overflow article http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed. Here’s a site where it’s being used: http://adolphusco.com
If you will show me a copy of how you are using it then I can take a look and see what is wrong.