数据结构
网络
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+ 阅读量
