資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
