JavaScript clearInterval () не очищает таймер - PullRequest
Новая
       14

JavaScript clearInterval () не очищает таймер

0 голосов
/ 13 января 2020

Я пытаюсь настроить таймер, который будет воспроизводить звук через определенное количество минут. Количество минут можно установить в поле ввода time.

Проблема в том, что clearInterval функция не работает.

Когда я устанавливаю таймер, скажем, на 1 минуту, а затем на 2 минуты, оба таймера активны.

Как убрать первый таймер после изменения таймера на 2 минуты, только новый будет воспроизводить звук?

HTML: 

<input id="time" /> 
<button onclick="timeFunction()">
    set Timer
</button>

<p id ="timer"></p>

JS: 

function timeFunction() {

var minuten = document.getElementById("time").value;
var sec = minuten * 60;
var msec = sec * 1000;

document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";

clearInterval(inter);

var inter = setInterval(function(){
   document.getElementById('gong').play(); }
    ,msec);

}

Ответы [ 3 ]

1 голос
/ 13 января 2020

var inter - это переменная, которая существует только в вашем timeFunction. Когда функция завершается, inter больше не существует. Когда clearInterval выполняется, inter не определено, потому что вы еще не присвоили ему значение.

Чтобы исправить это, объявите inter переменную вне вашей функции. Это позволит ему сохранять значение между несколькими выполнениями timeFunction. 

var inter;

function timeFunction() {
  // other code

  clearInterval(inter);

  inter = setInterval(function(){
    document.getElementById('gong').play();
  }, msec);
}
1 голос
/ 13 января 2020

Почему бы вам не вернуть интервал, 

function timeFunction() {

var minuten = document.getElementById("time").value;
var sec = minuten * 60;
var msec = sec * 1000;

document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";

return setInterval(function(){
   document.getElementById('gong').play(); }
    ,msec);

}

, тогда вы могли бы go, 

let intervals = timeFunction();

, тогда вы можете очистить его так, 

clearInterval(intervals);

таким образом вы контролируете, сколько раз он повторяется.

0 голосов
/ 13 января 2020

Если вы хотите, чтобы это запускалось только один раз, очистите интервал после выполнения вашей работы. Таким образом, ваша функция может быть переписана следующим образом: 

function timeFunction() {
  var minuten = document.getElementById("time").value;
  var sec = minuten * 60;
  var msec = sec * 1000;
  document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";
  var inter = setInterval(function() {
    document.getElementById('gong').play();
    clearInterval(inter);
  }, msec);
}

РЕДАКТИРОВАТЬ

Вы также можете вернуть inter переменную из вашей функции, чтобы вы могли использовать clearInterval всякий раз, когда логике вашего скрипта c нужен интервал для остановки. 

function timeFunction() {
  var minuten = document.getElementById("time").value;
  var sec = minuten * 60;
  var msec = sec * 1000;
  document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";
  var inter = setInterval(function() {
    document.getElementById('gong').play();
  }, msec);
  return inter;
}

let intv = timeFunction();

// rest of your javascript 
// ...

clearInterval(intv);
...