如何等待调整结束事件，然后使用 JavaScript 执行操作？

当我们调整浏览器窗口的大小时，“resize”事件会在调整大小的同时连续触发多次。我们希望“resize”事件仅在我们完成调整大小后触发。
先决条件：为了解决这个问题，我们使用两个函数：

• setTimeout()函数
• clearTimeOut()函数

示例：我们将使用setTimeout()以便它们在调整大小等待 500 毫秒后在我们想要触发的位置函数。现在，我们将 setTimeout()函数保留在“resize”事件中。就在setTimeout()之前，我们设置了clearTimeOut() ，它不断清除这个 setTimeout() 计时器。因为，当我们调整窗口大小时，resize 事件会连续触发，因此clearTimeOut()也会被连续调用。因此，在我们停止调整大小之前，setTimeout() 中的函数不会运行。

• HTML 代码：
  

• Javascript代码：
  

javascript

       
        // 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);
        });
    

最终解决方案：在本节中，我们将结合以上两个部分并执行任务。

• 程序：
  

html

 

 

    
    

 

    
    
 
    
       
        // 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);
        });
    

 

• 输出：

注意：代码将在我们完成调整大小后等待 500 毫秒，以在我们完成调整大小后触发我们想要运行的函数，