我在理解如何在类中使用 setInterval() 和 clearInterval() 时遇到问题。我正在尝试构建一个从 0 开始的计时器,直到我决定停止它。
到目前为止,我设法拥有一种方法,当您调用它时,计时器会启动,但当我尝试暂停它时,它只会忽略我的方法并继续。
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<p id="timer">im here</p>
</div>
<button>Start/Stop Timer</button>
<button>Reset Timer</button>
<script src="script.js"></script>
</body>
</html>
JS
class Timer {
constructor(){
this.isRunning = false;
this.currTimer = 0;
this.runTimer;
var timer = document.getElementById('timer');
}
start(){
this.isRunning = true;
if (this.isRunning) {
var currentTime = this.currTimer;
this.runTimer = setInterval(function(){
timer.innerHTML = ++currentTime;
},1000)
}
}
pause(){
this.isRunning = false;
if (this.isRunning = false) {
clearInterval(this.runTimer)
}
}
}
var test = new Timer();
test.start();
test.pause();// put this after a few seconds
我也很确定我用错了“this”。 我刚刚学习了这些新东西并尝试构建它。
最佳答案
如果你想在构造对象后使用它,你的timer
局部变量需要改为属性,所以在构造函数中,改变
var timer = document.getElementById('timer');
到
this.timer = document.getElementById('timer');
然后在 start
中,您还需要使用 this.timer
— 这意味着您要使用箭头函数,而不是一个传统函数,用于 setInterval
回调,以便函数在 this
上关闭。您可能想直接使用 this.currTimer
而不是将其复制到变量:
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
},1000);
那里的逻辑也需要调整:您刚刚将 true
分配给 this.isRunning
,因此之后无需检查它。但实际上,您想事先检查一下:
start(){
if (!this.isRunning) {
this.isRunning = true;
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
},1000);
}
}
你还需要使用 ==
或 ===
,而不是 =
,当做这样的比较时:
if (this.isRunning = false) { // Needs == or ===
但是 pause
中的逻辑有一个问题:你刚刚将 this.isRunning
设置为 false
,所以在下一个检查它线,它永远是假的。相反,在分配给它之前检查它。此外,仅使用 if (flag)
或 if (!flag)
而不是使用 == true
或 == false
:
pause(){
if (this.isRunning) {
clearInterval(this.runTimer)
this.isRunning = false;
}
}
似乎适用于这些更改:
class Timer {
constructor() {
this.isRunning = false;
this.currTimer = 0;
this.runTimer;
this.timer = document.getElementById('timer');
}
start() {
if (!this.isRunning) {
this.isRunning = true;
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
}, 1000);
}
}
pause() {
if (this.isRunning) {
clearInterval(this.runTimer);
this.isRunning = false;
}
}
}
var test = new Timer();
test.start();
setTimeout(function() {
test.pause(); // put this after a few seconds
}, 4000);
<div id="timer"></div>
我还强烈建议始终如一地使用 ;
(例如在调用 setInterval
之后)。 JavaScript 具有自动分号插入 (ASI),因此即使您没有,它也会像您在某些地方包含分号一样工作,但您不能依赖它,除非您对ASI规则。
关于javascript - 在类中使用 setInterval() 和 clearInterval(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50618626/