Почему таймер работает не так, как ожидалось? - PullRequest
Новая
       8

Почему таймер работает не так, как ожидалось?

0 голосов
/ 17 января 2019

[Примечание - скрипт не работает в JSfiddle, но отлично работает в chrome] Сценарий, приведенный ниже, состоит из 3-секундного таймера, по завершении которого он отображает текст «Time Up!». Это отлично работает с первой попытки, но при следующей попытке он начинает смешивать секунды и текст «Time Up!» (отображается между секундами). Почему это происходит?

http://jsfiddle.net/starzar/86uqrtzs/32/

function timer() {
  var t = 3;

  console.log("timer started t = " + t);


  setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}
<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>

Ответы [ 4 ]

0 голосов
/ 17 января 2019

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

setInterval функция возвращает идентификатор созданного интервала, вы можете сохранить его в глобальной переменной, например window.timerInterval .

Внутри функции таймера сначала запустите clearInterval (window.timerInterval) . Поэтому, если есть какие-либо интервалы, созданные и сохраненные в window.timerInterval , clearInterval (window.timerInterval) обязательно прекратит его запуск.

Проверьте и запустите рабочий пример ниже: 

function timer() {
  var t = 3;

  console.log("timer started t = " + t);

  clearInterval(window.timerInterval);

  window.timerInterval = setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}
<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>
0 голосов
/ 17 января 2019

SetInterval выполняет действие несколько раз в указанный интервал.

В вашем случае вы должны использовать setTimeOut. 

 var timerConst; 
 function timer() {

 if(timerConst) clearTimeOut( timerConst); // this will clear the previous timeout.

  timerConst = setTimeOut(function() {
    console.log("Time up");
    document.getElementById("timer").innerHTML = "Time Up!";
   }, 3000);}

Это отобразит текст через 3 секунды.

https://www.w3schools.com/jsref/met_win_settimeout.asp

0 голосов
/ 17 января 2019

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

Ваш первый интервал, который был запущен при первом вызове, все еще работает в фоновом режиме. Это хорошо видно на примере ниже.

Вы должны использовать clearInterval() 

function timer() {
  var t = 3;

  console.log("timer started t = " + t);


  setInterval(function() {
    if (t >= 0) {
      document.getElementById("timer").innerHTML = t;
      console.log(t);
      t--;
    } else {
      console.log("Time up");
      document.getElementById("timer").innerHTML = "Time Up!";
    }
  }, 1000);


  console.log("timer stopped t = " + t);
}
<html>

<head>

  <script src=timer.js></script>

</head>

<body>


  <input type=Reset onclick=timer()> <br>

  <hi id="timer"></hi> <br>

</body>

</html>
0 голосов
/ 17 января 2019

Потому что вам нужно очистить его, используя clearInterval()...!

Посмотрите на этот код в качестве ссылки:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}
<!DOCTYPE html>
<html>

<body>
  <p>A script on this page starts this clock:</p>
  <p id="demo"></p>
  <button onclick="myStopFunction()">Stop time</button>
</body>

</html>
...