1

Никак не могу разобраться как остановить уже запущенный таймер. Смысл в том, что я хочу при повторном нажатии на кнопку сбрасывать предыдущий таймер, и запускать новый. Но у меня запускается одновременно два таймера.

Я попытался объявить переменную timer глобальной, но все равно вне объекта её тип является 'undefined'. Я только начал изучать JS, помогите, пожалуйста.

var buttonOne = document.querySelector('.go');

function Timer(selector, time){
  
  var elem = document.querySelector(selector);
  window.timer = 0;
  var object = this;

  this.start = function() {
    timer = setInterval(this.tick, 1000);
  }

  this.stop = function() {
    clearInterval(timer);
  }

  this.tick = function() {
    if (time > 0) {
      time--;
      var hours = Math.floor(time / 3600);
      var minutes = Math.floor((time - (3600 * hours))/60);
      var seconds = time - hours * 3600 - minutes * 60;
      text = hours + ':' + minutes + ':' + seconds;
      document.querySelector('.time').innerHTML = text;	
    } else {
      object.stop;
    }
  }
}


buttonOne.onclick = function(){
  var userInput = document.querySelector('.seconds');
  var time = userInput.value;
  if (typeof(timer) != "undefined") {
		timer.stop();
	}
  var timer = new Timer('.time', time)
  timer.start();
}
<input class="seconds" value="10">
<button class="go">GO!</button>
<div class="time"></div>

15
  • 2
    Например функцией clearTimeout, clearInterval
    – And
    1 июн 2018 в 12:07
  • чтобы вызвать функцию нужно добавить скобки ()
    – Grundy
    1 июн 2018 в 12:07
  • @Grundy Эмм, так у меня есть функция this.stop = function() { clearInterval(timer); } И вызываю я ее со скобками. Вопрос в том, почему она не срабатывает. 1 июн 2018 в 12:21
  • Потому что object.stop; - Это не вызов функции. Вызов функции: object.stop();
    – Grundy
    1 июн 2018 в 12:28
  • @Grundy, object.stop; отрабатывает остановку таймера в этом блоке кода(при time < 0). Проблема не в этом. Проблема в том, что при повторном клике я не могу остановить уже ранее запущенный таймер. То есть у меня начинают тикать два одновременно 1 июн 2018 в 12:37

3 ответа 3

3

Проблема несрабатывания условия заключается во всплытии переменных в пределах функции.

При использовании var возможно обращение к переменной до ее инициализации. При этом значением переменной будет undefined.

Это означает, что в следующем коде

if (typeof(timer) != "undefined") {
    timer.stop();
}
var timer = new Timer('.time', time)

В пределах функции выражение в операторе if всегда будет false, так как проверяется именно локальная переменная, которая инициализируется после условия, а значит в момент проверки всегда undefined.


Решить проблему можно простым переименованием (во всех местах использования глобальной переменной) и прямым вызовом clearInterval

if (typeof(timerId) != "undefined") {
    clearInterval(timerId)
}

Так как в глобальную переменную timer на самом деле сохраняется id таймера, а не создаваемый объект.

2

Ошибок много.

  1. Зачем вам глобальная переменная для интервала, если его можно отлично сохранить в классе?
  2. setInterval(this.tick, 1000); в принципе нормально, но я бы заменил на setInterval(object.tick, 1000);
  3. text = hours + ':' + minutes + ':' + seconds; Переменная text не объявлена и попадает либо в глобальную область видимости, либо вызывает ошибку. Оно вам надо?
  4. document.querySelector('.time').innerHTML = text; тут две ошибки
    1. Вы игнорируете переданный снаружи селектор
    2. У вас уже есть поле elem, соответствующее этому селектору
  5. object.stop; это не вызов функции. Вызов функции должен быть таким object.stop();
  6. if (typeof(timer) != "undefined")
      timer.stop();
    var timer = new Timer('.time', time);
    

    Проверили нет ли объекта timer в области видимости и создали локальный объект.

Итого:

var buttonOne = document.querySelector('.go');

function Timer(selector, time){
  var elem = document.querySelector(selector);
  var timer = 0;
  var object = this;

  this.start = function() {
    timer = setInterval(object.tick, 1000);
  }

  this.stop = function() {
    clearInterval(timer);
  }

  this.tick = function() {
    if (time > 0) {
      time--;
      var hours = Math.floor(time / 3600);
      var minutes = Math.floor((time - (3600 * hours))/60);
      var seconds = time - hours * 3600 - minutes * 60;
      var text = hours + ':' + minutes + ':' + seconds;
      elem.innerHTML = text;	
    } else {
      object.stop();
    }
  }
}

var timer;

buttonOne.onclick = function(){
  var userInput = document.querySelector('.seconds');
  var time = userInput.value;
  if (typeof(timer) != "undefined") {
    timer.stop();
  }
  timer = new Timer('.time', time);
  timer.start();
}
<input class="seconds" value="10">
<button class="go">GO!</button>
<div class="time"></div>

2
  • шестой пункт ошибочный. Второй - спорный
    – Grundy
    1 июн 2018 в 12:48
  • лучше, но все равно плохо
    – Grundy
    1 июн 2018 в 12:51
0

var buttonOne = document.querySelector('.go');

function Timer(selector, time){
  
  var elem = document.querySelector(selector);
  window.timer = 0;
  var object = this;

  this.start = function() {
    timer = setInterval(this.tick, 1000);
  }

  this.stop = function() {
    clearInterval(timer);
  }

  this.tick = function() {
    if (time > 0) {
      time--;
      var hours = Math.floor(time / 3600);
      var minutes = Math.floor((time - (3600 * hours))/60);
      var seconds = time - hours * 3600 - minutes * 60;
      text = hours + ':' + minutes + ':' + seconds;
      document.querySelector('.time').innerHTML = text; 
    } else {
      object.stop;
    }
  }
}


buttonOne.onclick = function(){
  var userInput = document.querySelector('.seconds');
  var time = userInput.value;
  if (typeof(timer) != "undefined") {
        timer.stop();
    }
  var timer = new Timer('.time', time)
  timer.start();
}
<input class="seconds" value="10">
<button class="go">GO!</button>
<div class="time"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.