Блог

Главная - Вопросы по программированию - Таймер Javascript останавливается на 1, не продолжается до 0

Таймер Javascript останавливается на 1, не продолжается до 0

#javascript #html #timer #countdown

#javascript #HTML #таймер #обратный отсчет

Вопрос:

Я пытался заставить этот обратный отсчет javascript работать и получил обратный отсчет от 3 до 1, однако я не могу понять, почему он не доходит до 0?

Почему он останавливается на 1 и как мне заставить его полностью отсчитывать время?

 <body>
<p>Time left: <span id="time">3</span> seconds.</p>
<p><a href="#" onclick="play()">Play</a> <a href="#" onclick="pause()">Pause</a></p>
<script>
var time = 3,
timeElement = document.getElementById('time'),
timer = null;
var updateTimer = function() {
  timeElement.innerHTML = time--;
  if (time === 0) {
    clearInterval(timer);
  }
}
function play() {
    timer = setInterval(updateTimer, 1000);
    return false;
}
function pause() {
    clearInterval(timer);
    return false;
}
</script>
</body>

Вы также можете протестировать JsFiddle, который я сделал здесь: http://jsfiddle.net/Vg4kQ/
Спасибо за вашу помощь!

Ответ №1:

Используйте префикс вместо постфиксного уменьшения:

 timeElement.innerHTML = --time;

Это связано с семантическими различиями между префиксными и постфиксными операторами инкремента / декремента. Они оба увеличивают / уменьшают значение переменной, как и ожидалось, но они не вычисляются до того же значения при использовании в качестве выражений.

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

 var x = 5;
console.log(  x); // 6
console.log(x);   // 6

Постфиксные операторы немного менее интуитивно понятны. Они по-прежнему изменяют значение таким же образом, но при использовании в качестве выражений они вычисляют значение переменной до ее изменения.

 var x = 5;
console.log(x  ); // 5
console.log(x);   // 6

В вашем коде при time достижении 0 выражение postfix по-прежнему выдает предыдущее значение, 1, что делает timeElement значение ‘s по-прежнему отображаемым 1, но все равно завершает цикл. Преобразование выражения для использования префиксного уменьшения устраняет эту проблему.

В качестве альтернативы, вы всегда можете просто разделить его на два оператора.

 time--;
timeElement.innerHTML = time;

Комментарии:

1. время = 3, уменьшается до 2, выводит 2. время = 2, уменьшается до 1, выводит 1. время = 1, уменьшается до 0, выводит 0, завершается