Question

我在理解如何在类中使用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

我也很确定我使用“这个”错了。我刚刚学会了这些新东西并尝试构建它。

Answer 1

如果要在构造对象后使用它，则timer局部变量需要是属性，因此在构造函数中，更改

var timer = document.getElementById('timer');

到

this.timer = document.getElementById('timer');

然后在start中，您还需要使用this.timer - 这意味着您想要使用箭头函数，而不是传统函数，{{ 1}}回调，以便函数关闭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。而是在分配之前检查它。另外，只使用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>（例如在致电;之后）。 JavaScript有自动分号插入（ASI）所以它会像你在某些地方包含分号一样，即使你没有，但你不能依赖它，除非你对非常彻底了解ASI规则。

Answer 2

在你的情况下，你要分配而不是比较。

此：

pause() {
  this.isRunning = false;
  if (this.isRunning = false) {
    clearInterval(this.runTimer)
  }
}

应该是：

pause() {
  this.isRunning = false;
  if (this.isRunning === false) {
    clearInterval(this.runTimer)
  }
}

或者，因为条件将始终评估为true，只需：

pause() {
  this.isRunning = false;

  clearInterval(this.runTimer)
}

在类中使用setInterval（）和clearInterval（）

2 个答案: