我正在尝试使用纯Javascript构建简单的乘法游戏。当我单击开始按钮时，它将调用函数timeCalc（）。 timeCalc函数以7的值声明变量名称fullTime并设置间隔，每隔一秒钟将fullTime减小1。当减小到1时，将fullTime值设置为7。
如果我多次单击“开始”按钮，即使我一开始就做过clearInterval（），fullTime也会如此迅速且以无序方式递减。我想以正常方式将fullTime从7减少，即使我单击多次也是如此。幕后发生了什么？
这是我的代码段。谢谢。
const timeContainer = document.querySelector('.math__time');
const startBtn = document.querySelector('.math__start');
function timeCalc() {
clearInterval(timeLeft);
let fullTime = 7;
timeContainer.textContent = fullTime;
var timeLeft = setInterval(function() {
fullTime--;
timeContainer.textContent = fullTime;
if (fullTime === 1) {
fullTime = 7;
}
},1000);
}
startBtn.addEventListener('click', timeCalc);*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.math {
background: gray;
font-family: verdana, sans-serif;
}
.math__calc {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.math__num {
margin: 15px;
color: #fff;
font-size: 30px;
padding-left: 100px;
}
.math__num--wrapper {
position: relative;
}
.math__time {
padding: 10px;
background: black;
color: #fff;
position: absolute;
right: 20px;
top: 20px;
border: #fff 2px solid;
}
.math__start {
position: absolute;
left: 20px;
top: 20px;
border: 2px solid #fff;
background: #333;
color: #fff;
padding: 10px;
}
.math__multiply--symbol {
position: absolute;
bottom: -10px;
left: 10px;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Math</title>
<!-- default css -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="math">
<div class="math__time">0</div>
<button class="math__start">Start</button>
<div class="math__calc">
<div class="math__num--wrapper">
<div class="math__num math__num--one">88</div>
<span class="math__multiply--symbol">*</span>
<div class="math__num math__num--two">22</div>
</div>
<form class="math__ans">
<input type="text" name="answer" class="math__ans--user">
</form>
</div>
</body>
</html>最佳答案
Maheer是正确的，唯一的补充就是不会污染您的全球空间。创建一个闭合来保存这些变量。我更新了函数以返回一个函数。
问题
您的clearInterval(timeLeft)实际上没有清除任何内容。 timeLeft在清除时未定义。
解决方案
移动timeleft的范围更大。您可以：
-将其放在全局名称空间中（不推荐）
-在timeCalc函数周围创建一个作用域。
我实现了下面的第二个解决方案。我首先更改了timeCalc()。现在timeCalc()产生一个函数。此函数可用作.addEventListener()的回调。
然后在.addEventListener()中调用该函数将返回一个计时器函数，其变量包含在闭包中。我还将函数中的fulltime更改为8，以显示倒数到1后的7秒。
const timeContainer = document.querySelector('.math__time');
const startBtn = document.querySelector('.math__start');
function timeCalc() {
let timeLeft = null;
let fullTime = 7;
return function() {
clearInterval(timeLeft);
fullTime = 7;
timeContainer.textContent = fullTime;
timeLeft = setInterval(function() {
fullTime--;
timeContainer.textContent = fullTime;
if (fullTime === 1) {
fullTime = 8;
}
},1000);
}
}
startBtn.addEventListener('click', timeCalc());*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.math {
background: gray;
font-family: verdana, sans-serif;
}
.math__calc {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.math__num {
margin: 15px;
color: #fff;
font-size: 30px;
padding-left: 100px;
}
.math__num--wrapper {
position: relative;
}
.math__time {
padding: 10px;
background: black;
color: #fff;
position: absolute;
right: 20px;
top: 20px;
border: #fff 2px solid;
}
.math__start {
position: absolute;
left: 20px;
top: 20px;
border: 2px solid #fff;
background: #333;
color: #fff;
padding: 10px;
}
.math__multiply--symbol {
position: absolute;
bottom: -10px;
left: 10px;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Math</title>
<!-- default css -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="math">
<div class="math__time">0</div>
<button class="math__start">Start</button>
<div class="math__calc">
<div class="math__num--wrapper">
<div class="math__num math__num--one">88</div>
<span class="math__multiply--symbol">*</span>
<div class="math__num math__num--two">22</div>
</div>
<form class="math__ans">
<input type="text" name="answer" class="math__ans--user">
</form>
</div>
</body>
</html>