极客笔记如何使用JavaScript等待调整大小结束事件然后执行操作
每当我们调整网页窗口大小时，默认情况下会触发“resize”事件。在调整窗口大小时，“resize”事件会触发多次。有时候，我们需要在调整大小事件完成时只执行一次JavaScript代码。
在这种情况下，我们必须使用setTimeOut()方法与resize事件一起使用，以在事件完成后执行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的resize事件
按照以下步骤，如果用户在过去的500毫秒内没有调整窗口大小，则触发executeOnResizeEnd()函数。
步骤 1 - 定义resetTime变量来存储调整窗口大小时的当前日期，timeout变量来存储表示超时完成的布尔值，delay变量表示在调整大小完成后延迟一定毫秒数执行函数。
步骤 2 - 使用jQuery调用回调函数，当resize事件发生时执行。
步骤 3 - 在回调函数中将当前时间存储在resetTime变量中。还要检查’timeout’变量的值是否为false，将其设置为true，并为executeOnResizeEnd()函数设置一个超时。
步骤 4 - 在executeOnResizeEnd()函数中，检查当前时间是否不同，重设时间是否小于延迟，并再次为函数设置超时。否则，执行函数的代码。
示例
在下面的示例中，我们使用jQuery在调整事件完成时执行JavaScript代码。在下面的示例中，我们仅使用了setTimeOut()方法而没有使用clearTimeOut()方法，并按照上述步骤在调整事件完成后执行executeOnResizeEnd()函数。
<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创建了自定义算法，在调整大小事件结束时执行脚本。