当计时器达到 00:00 时，如何设置 5 秒的延迟？

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

欢迎使用 Whosebug。您可以通过在代码中添加第二个计时器来实现您的目标，如下所示：

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;
}

Answer 2

您可以将行 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 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

这是不是使用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>

当计时器达到 00:00 时，如何设置 5 秒的延迟？

How can I set a delay of 5 seconds when the timer hits 00:00?

javascript

settimeout

countdowntimer