How to wait resize end event and then perform an action using JavaScript ? Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report When we resize the browser window, the "resize" event is fired continuously, multiple times while resizing. We want the "resize" event to only be fired once we are done resizing.Prerequisite: To solve this problem we use two functions: setTimeout() functionclearTimeOut() functionExample: We will use setTimeout() so that the function that we want to be fired after resizing waits for 500ms. Now, we keep the setTimeout() function in the "resize" event. Right before setTimeout(), we set clearTimeout (), which keeps clearing this setTimeout() timer. Since the resize event is fired continuously when we resize the window, due to the clearTimeout() is also called continuously. Due to this, the function inside setTimeout() does not run until we stop resizing. html <!DOCTYPE html> <html> <body> <div id="message"></div> <script> var message = document.getElementById("message"); var timeOutFunctionId; function workAfterResizeIsDone() { message.innerHTML += "<p>Window Resized</p>"; } window.addEventListener("resize", function() { clearTimeout(timeOutFunctionId); timeOutFunctionId = setTimeout(workAfterResizeIsDone, 500); }); </script> </body> </html> Output: Note: The code will wait 500ms after we are done resizing to fire the function we want to run after we are done resizing. Comment More infoAdvertise with us Next Article How to get the image size (height & width) using JavaScript? A Archaic Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to create auto-resize textarea using JavaScript/jQuery ? Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.Table of ContentUsing JavaS 3 min read How to create auto-resize textarea using JavaScript/jQuery ? Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.Table of ContentUsing JavaS 3 min read How to get the image size (height & width) using JavaScript? To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access 2 min read How to get the image size (height & width) using JavaScript? To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access 2 min read How to detect when the window size is resized using JavaScript ? Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScriptThe window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in 3 min read Like