JavaScript 如何等待调整大小的结束事件，然后执行一个动作

每当我们调整网页窗口的大小时，默认会触发’调整大小’事件。在调整窗口大小的时候，’调整大小’事件会触发多次。有时，我们需要在调整大小事件完成时只执行一次JavaScript代码。

在这种情况下，我们必须使用setTimeOut()方法与调整大小事件一起，在事件完成后执行JavaScript代码或函数。此外，我们还需要使用clearTimeOut()方法。

语法

用户可以按照下面的语法来等待调整大小事件的完成，然后用JavaScript执行一个动作。

window.addEventListener('resize', () => {

   // It clears the previous timeout
   clearTimeout(timeId);

   // It creates a new timeout to execute the function
   timeId = setTimeout(function, delay);
});

在上述语法中，我们使用了clearTimeOut（）和setTimeOut（）方法。每当调整大小事件发生时，我们使用timeId清除之前的超时。之后，我们再次为该函数设置超时，并将其id存储在timeId变量中。

例子1 (使用addEventListner方法的调整大小事件)

在下面的例子中，我们使用addEventListner()方法在窗口上添加了调整大小事件。每当在窗口上触发调整大小的事件时，它将执行回调函数。在回调函数中，首先，我们清除超时，并为executeAfterResize()函数再次设置超时。如果用户在最后1000毫秒内没有调整窗口的大小，它将执行executeAfterResize()函数。

<html>
<body>
   <h2>Executing JavaScript function when resize event completes</h2>
   <h3>Starts resizing the window</h3>
   <div id = "content"></div>
   <script>
      let content = document.getElementById('content');

      // function to execute JavaScript code after the window resize event completes
      function executeAfterResize() {
         content.innerHTML += "This function is executed after resize event is completed! <br>";
      }
      var timeId = null;
      window.addEventListener('resize', () => {
         clearTimeout(timeId);
         timeId = setTimeout(executeAfterResize, 1000);
      });
   </script>
</body>
</html>

例2 (使用onresize事件属性)

在下面的例子中，我们使用了’onresize’事件属性来执行startResize()函数，只要用户调整窗口的大小。在startResize()函数中，我们使用了第一个例子中的clearTimeOut()和setTimeOut()方法，在调整大小事件完成后执行JavaScript代码。

<html>
<body onresize="startResize()">
   <h3>Executing JavaScript function when resize event completes using the onresize event attribute</h3>
   <p>Starts resizing the window<p>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      function executeAfterResize() {
         content.innerHTML += "This function is executed after resize event is completed! <br>";
      }
      var timeId = null;
      function startResize() {
         clearTimeout(timeId);
         timeId = setTimeout(executeAfterResize, 1000);
      }
   </script>
</body>
</html>

在jQuery中使用调整大小事件

按照下面的步骤触发executeOnResizeEnd()函数，如果用户在过去500毫秒内没有调整窗口的大小。

第1步 - 定义resetTime变量来存储当前的日期，同时调整窗口的大小，timeout变量来存储一个布尔值，代表超时完成，delay变量代表当调整大小完成后，在一个延迟的毫秒数后执行一个函数。

第2步 - 当调整大小事件发生时，使用jQuery调用回调函数。

第3步 - 在回调函数的resetTime变量中存储当前时间。同时，检查’timeout’变量的值是否为假，使其为真，并为executeOnResizeEnd()函数设置一个超时时间。

第4步 - 在executeOnResizeEnd()函数中，检查当前时间是否不同，复位时间是否小于延迟时间，并再次为该函数设置超时。否则，执行该函数的代码。

例子

在下面的例子中，我们使用JQuery在调整大小事件完成后执行JavaScript代码。在下面的例子中，我们只使用了setTimeOut()方法，没有使用clearTimeOut()方法，并按照上述步骤在调整大小事件完成后执行executreOnResizeEnd()函数。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Executing JavaScript function when resize event completes using jQuery</h3>
   <p>Started resizing the window</p>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      var resetTime;
      var timeout = false;
      var delay = 500;
      $(window).resize(function () {

         // get the current time
         resetTime = new Date();

         // if the timeout is false, set it to true

         // set delay for executreOnResizeEnd function
         if (timeout === false) {
            timeout = true;
            setTimeout(executeOnResizeEnd, delay);
         }
      });
      function executeOnResizeEnd() {

         // if the difference between the current time and reset time is less than the delay, set timeout for function again
         if (new Date() - resetTime < delay) {
            setTimeout(executeOnResizeEnd, delay);
         } else {

            // if window is not resized in last 500ms, execute the below code
            timeout = false;
            content.innerHTML = "Resize event is completed. <br>"
         }
      }
   </script>
</body>
</html>