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

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Javascript Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 follwing 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>

    chevron_right

    
    

  • Finel Solution: In this section, we will combine the above two sections and perform the task.

    • Program:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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 follwing 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>

      chevron_right

      
      

    • 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,

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.