How to wait resize end event and then perform an action using JavaScript ? - GeeksforGeeks

19 Oct, 2021
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() function
clearTimeOut() function
Example: We will use setTimeout() so that they function in which we want to be fire after resizing waits for 500ms. Now, we keep 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 this the clearTimeOut() is also called continuously. Due to this, the function inside setTimeout() does not run until we stop resizing. 
HTML Code:  
html
<!DOCTYPE html> <html lang="en"><head>    <meta charset="utf-8" />    <title></title></head> <body>    <!-- div is used to display a message         when we are done resizing -->    <div id="message"></div></body> </html>
 
Javascript Code:  
javascript
    <script>               // Message variable contains the div object which        // is used to display message after we are done resizing        var message = document.getElementById("message");               // timeOutFunctionId stores a numeric ID which is        // used by clearTimeOut to reset timer        var timeOutFunctionId;         // The function that we want to execute after        // we are done resizing        function workAfterResizeIsDone() {            message.innerHTML += "<p>Window Resized</p>";        }         // The following event is triggered continuously        // while we are resizing the window        window.addEventListener("resize", function() {                       // clearTimeOut() resets the setTimeOut() timer            // due to this the function in setTimeout() is            // fired after we are done resizing            clearTimeout(timeOutFunctionId);                       // setTimeout returns the numeric ID which is used by            // clearTimeOut to reset the timer            timeOutFunctionId = setTimeout(workAfterResizeIsDone, 500);        });    </script>
Final Solution: In this section, we will combine the above two sections and perform the task.  
Program:  
html
<!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8" />    <title></title></head> <body>    <!-- div is used to display a message         when we are done resizing -->    <div id="message"></div>     <script>               // Message variable contains the div object which        // is used to display message after we are done resizing        var message = document.getElementById("message");               // timeOutFunctionId stores a numeric ID which is        // used by clearTimeOut to reset timer        var timeOutFunctionId;         // The function that we want to execute after        // we are done resizing        function workAfterResizeIsDone() {            message.innerHTML += "<p>Window Resized</p>";        }         // The following event is triggered continuously        // while we are resizing the window        window.addEventListener("resize", function() {                       // clearTimeOut() resets the setTimeOut() timer            // due to this the function in setTimeout() is            // fired after we are done resizing            clearTimeout(timeOutFunctionId);                       // setTimeout returns the numeric ID which is used by            // clearTimeOut to reset the timer            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, 
Akanksha_Rai
prachisoda1234
HTML-Misc
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills