javascript - 无法清除Interval()
问题描述
最近我在用 JavaScript 做一个秒表项目。我遇到的事情很少。首先,当我将变量分配给 setInterval() 函数时,例如let sInterval = setInterval(functionName, milliseconds)
. 我无法将它传递给 eventListener。但是当我这样做时:sInterval = () => setInterval(functionName, milliseconds)
,我可以将它传递给 eventListener 并启动秒表。但是当我现在想停止秒表时,它不起作用。我不知道出了什么问题,也不知道如何解决。请帮助:/这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="stopwatch">
<meta name="description" content="stopwatch">
<meta name="author" content="Nick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stopwatch.css">
<script src="stopwatch.js"></script>
</head>
<body>
<h1>STOPAWATCH</h1>
<h1>JAVASCRIPT STOPWATCH</h1>
<div id="stopwatch"></div>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
text-align: center;
background-color: orange;
font-family:'Courier New', Courier, monospace;
font-size: 100%;
color: white;
}
h1 {
font-size: 3em;
font-weight: normal;
}
#stopwatch {
font-size: 3em;
margin-bottom: 20px;
}
[id|="button"] {
background-color: orange;
color: white;
width: 20%;
height: 80px;
font-size: 1.5em;
margin: 3%;
border: 1px solid white;
border-radius: 5px;
}
[id|="button"]:hover {
cursor: pointer;
color: orange;
background-color: white;
}
window.onload = () => {
let start = document.getElementById("button-start");
let stop = document.getElementById("button-stop");
let reset = document.getElementById("button-reset");
let stopwatch = document.getElementById("stopwatch");
let h, m, s;
initialize = () => {
h = m = s = "0" + 0;
stopwatch.innerHTML = `${h}:${m}:${s}`;
}
let sInterval = () => setInterval(() => {
s++;
if (s < 10 && s[0] !== "0") {
s = "0" + s;
} else if (s === 60) {
m++;
s = "0" + 0;
}
if (m < 10 && m[0] !== "0") {
m = "0" + m;
} else if (m === 60) {
h++;
m = "0" + 0;
}
if (h < 10 && h[1] !== "0") {
h = "0" + h;
}
stopwatch.innerHTML = h + ":" + m + ":" + s;
}, 1000);
reset.addEventListener("click", () => {
clearInterval(sInterval);
initialize();
});
start.addEventListener("click", sInterval);
stop.addEventListener("click", clearInterval(sInterval));
initialize();
}
解决方案
to 的参数clearInterval()
实际上不是“您传递给 的函数setInterval()
。它是“对 setInterval() 的相应调用返回的 ID”
尝试这样的事情:
let sInterval = () => {
s++;
...
};
let intervalID = setInterval(sInterval, 1000);
reset.addEventListener("click", () => {
clearInterval(intervalID);
...
}
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
推荐阅读
- qt - 如何在 Qt 中使用 QProcess 在 Linux 文本编辑器中打开文本文件
- spring-boot - Spring data cassandra - 打开新频道时出错
- python - 在 python Flask 中动态压缩图像
- node.js - 使用 amCharts 时无法从 http get 请求将数据作为外部数据加载
- bash - 后台进程结束后如何继续执行脚本?
- swiftui - 如何处理兼容旧设备的 Swift UI 版本?
- php - 我在复杂的 php 表单验证方面需要帮助
- octobercms - 在 Octobercms 前端按降序排序博客菜单项
- entity-framework - EF Core 可查询
. Count() 返回与 Queryable 不同的数字 .ToList().Count()。这甚至可能还是一个错误? - php - PHP; 时间转换形式距离和速度