{"id":5031,"date":"2013-08-30T02:00:00","date_gmt":"2013-08-30T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/firing-resize-event-only-once-when-resizing-is-finished\/"},"modified":"2024-02-08T00:30:12","modified_gmt":"2024-02-07T23:30:12","slug":"firing-resize-event-only-once-when-resizing-is-finished","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/firing-resize-event-only-once-when-resizing-is-finished\/","title":{"rendered":"JQuery Resize Event After Resize Ends [JavaScript & jQuery]"},"content":{"rendered":"

jQuery resize event<\/a> (or Javascript one) is fired when the size of the browser’s window (viewport) changes as pointed out in jQuery documentation.<\/p>\n

Sometimes we need to execute functions which might take a while to execute or which might consume quite a few resources from the machine. For those cases we don’t usually want to execute them tens of times while the user is still re-sizing the window to reach the desired size.<\/p>\n

For these particular cases we can use a very simple trick:<\/p>\n

var<\/span> resizeId;\n$(window<\/span>).resize(function<\/span>(<\/span>) <\/span>{\n    clearTimeout(resizeId);\n    resizeId = setTimeout(doneResizing, 500<\/span>);\n});\n\nfunction<\/span> doneResizing<\/span>(<\/span>)<\/span>{\n    \/\/whatever we want to do<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
\n\n
\nSee Demo<\/a>\n<\/div>\n\n<\/div>\n\n
Basically what we do in this case is adding a timeout of 500 milliseconds to call our function doneResizing<\/code>.
\nThis counter of 500 milliseconds gets restarted with every change in the window dimensions (as we clear the timeout) so the function will only be called if the user stops resizing the window OR if the user resizes the window VERY slowly, which is very unlikely \ud83d\ude42<\/p>\n
I’m personally making use of this trick on my fullPage.js library<\/a> because it does a few changes on the DOM on resize. You can see it implemented here<\/a>.<\/p>\n
In case you want to mimic the same behaviour in vanilla Javascript<\/strong>, here’s the equivalent:<\/p>\n
var<\/span> resizeId;\nwindow<\/span>.addEventListener('resize'<\/span>, function<\/span>(<\/span>) <\/span>{\n    clearTimeout(resizeId);\n    resizeId = setTimeout(doneResizing, 500<\/span>);\n});\n\nfunction<\/span> doneResizing<\/span>(<\/span>)<\/span>{\n    \/\/whatever we want to do<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here’s a working example. You can test it by opening the codepen<\/a> on a new window and resizing the right frame.<\/p>\n\n