数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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() 方法。每当发生 resize 事件时，我们使用 timeId 清除先前的超时。之后，我们再次为函数设置超时，并将它的 ID 存储在 timeId 变量中。
示例 1（使用 addEventListner 方法与 resize 事件）
在下面的示例中，我们使用了 addEventListner() 方法在窗口上添加 resize 事件。每当窗口上触发调整大小事件时，它都会执行回调函数。在回调函数中，我们首先清除超时，然后再次为 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 事件
请按照以下步骤触发 executeOnResizeEnd() 函数，如果用户在最后 500 毫秒内没有调整窗口大小。
步骤 1 – 定义 resetTime 变量以存储调整窗口大小时的当前日期，timeout 变量以存储表示超时已完成的布尔值，delay 变量表示在调整大小完成后延迟一定毫秒数后执行函数。
步骤 2 – 使用 jQuery 在发生 resize 事件时调用回调函数。
步骤 3 – 在回调函数中将当前时间存储在 resetTime 变量中。此外，检查“timeout”变量的值是否为 false，如果为 false，则将其设置为 true，并为 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 创建了自定义算法，以便在调整大小事件结束时执行脚本。
2K+ 浏览量
