資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript clearTimeout() & clearInterval() 方法
在 JavaScript 中，clearTimeout() 和 clearInterval() 方法用於清除定時器。當我們使用 setTimeout() 或 setInterval() 方法設定定時器時，瀏覽器會分配記憶體來跟蹤它。
因此，我們使用這些方法來釋放該記憶體並避免不必要的函式呼叫。
當不再需要定時器時，最好清除它們。在本文中，我們將學習 clearTimeout() 和 clearInterval() 方法如何幫助清除定時器。
JavaScript clearTimeout() 方法
JavaScript 中的 clearTimeout() 方法 清除先前由 setTimeout() 函式 設定的超時。它接受一個整數值作為引數，如果此引數無法識別先前設定的操作，則該方法什麼也不做。
語法
此方法具有以下語法：
clearTimeout(timeout)
其中，timeout 是呼叫 setTimeout() 返回的 ID。此引數充當要清除的超時的識別符號。
示例
以下示例說明了 JavaScript clearTimeout() 方法的工作原理。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.timeout {
margin-right: 170px;
display: inline-block;
width: 200px;
height: 200px;
}
.stopTimeout {
margin-right: 100px;
}
</style>
</head>
<body>
<h1>clearTimeout() Method </h1>
<div class="timeout" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<div class="resultTimeout"></div>
<script>
let resTimeout = document.querySelector(".resultTimeout");
function changeColor(ele) {
if (ele.style.backgroundColor == "blue") {
ele.style.backgroundColor = "red";
} else {
ele.style.backgroundColor = "blue";
}
}
let timeout;
function startTimeout() {
timeout = setTimeout(
changeColor.bind(this, document.querySelector(".timeout")),
1500
);
resTimeout.innerHTML = "Timeout has been started";
}
function stopTimeout() {
clearTimeout(timeout);
resTimeout.innerHTML = "Timeout has been cleared";
}
</script>
</body>
</html>
執行以上程式碼後，將顯示一個藍色方框以及兩個按鈕。單擊 "START TIMEOUT" 按鈕將啟動計時器，當您單擊 "STOP TIMEOUT" 按鈕時，計時器將被清除。
JavaScript clearInterval() 方法
JavaScript 中的 clearInterval() 方法 清除先前由 setInterval() 函式 設定的間隔。它接受一個整數作為引數值，如果此引數無法識別先前設定的操作，則該方法什麼也不做。
語法
此方法的語法如下：
clearInterval(interval)
其中，interval 是呼叫 setInterval() 返回的 ID。此引數充當要清除的操作的識別符號。
示例
以下是 clearInterval() 方法的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.interval {
display: inline-block;
width: 200px;
height: 200px;
}
.stopTimeout {
margin-right: 100px;
}
</style>
</head>
<body>
<h1>clearInterval() Method</h1>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startInterval" onclick="startInterval()">START INTERVAL</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<script>
let resInterval = document.querySelector(".resultInterval");
function changeColor(ele) {
if (ele.style.backgroundColor == "blue") {
ele.style.backgroundColor = "red";
} else {
ele.style.backgroundColor = "blue";
}
}
let interval;
function startInterval() {
interval = setInterval(
changeColor.bind(this, document.querySelector(".interval")),
1500
);
resInterval.innerHTML = "Interval has been started";
}
function stopInterval() {
clearInterval(interval);
resInterval.innerHTML = "Interval has been cleared";
}
</script>
</body>
</html>
執行以上程式碼後，將顯示一個藍色方框以及兩個按鈕。單擊 "START INTERVAL" 按鈕將啟動計時器，當您單擊 "STOP INTERVAL" 按鈕時，計時器將被清除。
2K+ 閱讀量
