Как я могу установить задержку в 5 секунд, когда таймер дойдет до 00:00?

Question

Я устанавливаю таймер обратного отсчета для приложения, и когда этот отсчет достигает отметки 00:00, я хочу иметь 5 секунд задержки, прежде чем он возобновит обратный отсчет. Как я могу использовать setTimeout (), чтобы сделать это?

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

           display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                timer = duration;
            }
    }, 1000);
    duration = timer;
}

Answer 1

Вы можете просто обернуть строку timer = duration; в функции и передать ее в setTimeout.Отображать обновленное время только в том случае, если timer >= 0, в противном случае на нем будут отображаться -ive числа.

const display = document.querySelector('#display')

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if(timer >= 0){
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

           display.textContent = minutes + ":" + seconds;
           }

            if (--timer < 0) {
                
                setTimeout(()=>timer = duration,5000)
            }
    }, 1000);
    duration = timer;
}

startTimer(10,display)

<div id="display"></div>

Answer 2

Это решение , а не с использованием setTimeout, поскольку оно не является необходимым.Он просто начинает отсчет до -5 (без обновления дисплея), а затем начинается снова.

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            if (timer >= 0) {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;
            }
            
            --timer;
            
            if (timer <= -5) {
                timer = duration;
            }
    }, 1000);
}

window.onload = function() {
  startTimer(10, document.getElementById('display'));
};

<span id="display"></span>

Answer 3

Интервал будет продолжаться до тех пор, пока вы не очистите его, поэтому вам нужно сделать, чтобы таймер достиг нуля, очистить интервал и затем установить тайм-аут, который перезапустит интервал.(Чтобы очистить интервал, вам сначала нужно сохранить возвращенный дескриптор в переменной.) Здесь может помочь немного рекурсии:

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var timerInterval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        window.clearInterval(timerInterval);
        window.setTimeout(() => startTimer(duration, display), 5000);
    }
  }, 1000);
}

Answer 4

Добро пожаловать в Stackoverflow.Вы можете достичь своей цели, добавив в свой код второй таймер, например:

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

           display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                setTimeout(function(){
                    timer = duration;
                },5000); // 5 seconds delay
            }
    }, 1000);
    duration = timer;
}