Использование setInterval () и clearInterval () в классах - PullRequest
Новая
       0

Использование setInterval () и clearInterval () в классах

0 голосов
/ 31 мая 2018

У меня проблема с пониманием того, как использовать 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

Я также почти уверен, что использую "это" неправильно.Я только что изучил этот новый материал и пытаюсь его построить.

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Если вы хотите использовать его после создания объекта, ваша локальная переменная 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правила.

0 голосов
/ 31 мая 2018

В вашем состоянии вы назначаете вместо сравнения.

Это: 

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

Должно быть: 

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

Или, потому что условие будетвсегда оценивать как истинное, просто: 

pause() {
  this.isRunning = false;

  clearInterval(this.runTimer)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...