极客教程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>
在本教程中，用户学会了等待，直到调整大小事件补充和触发JavaScript函数。在前两个例子中，我们使用了clearTimeOut()和setTimeOut()方法来实现这一目标。在第三个例子中，我们使用JQuery创建了自定义算法，在调整大小事件结束时执行脚本。