Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 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: 
 

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:

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,
 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!