javascript - 在计时器结束时显示消息一段时间

Question

我想知道如何在计时器结束时显示一条消息一段时间(1 分钟)，然后再次循环。

所需流程的示例:

• 计时器开始 2 分钟(“02:00”)
• 一旦完成 1 分钟，计时器就会在最后替换为一条消息(“等待...”)，并且所有这些都在循环中完成

谢谢你，昆汀·S。

我已经实现了计时器，但我错过的不仅仅是监视器标记被我想在从头开始进程之前放置 1 分钟的消息所取代

<div><span id="time">02:00</span></div>

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

    window.onload = function () {
        var twoMinutes = 60 * 2,
            display = document.querySelector('#time');
        startTimer(twoMinutes, display);
    };

Answer 1

我会在时间达到零时停止间隔并在一分钟后使用 setTimeout 重新启动间隔来实现此目的

顺便说一句，您的代码有一个小错误，为 setInterval 提供的回调不会在间隔开始时运行，而是仅在一个间隔(在您的情况下为一秒)之后运行。我已经在这里解决了这个问题。

我还调整了时间以减少等待。

function startTimer(duration, display, pause) {
    var timer = duration, minutes, seconds;
    const updateTime = 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;
            display.textContent = "wait...";
            clearInterval(intervalId);
            setTimeout(function () {
                startTimer(duration, display, pause)
            }, pause*1000)
        }
    }
    const intervalId = setInterval(updateTime, 1000);
    updateTime();
}

window.onload = function () {
    var interval = 4,
        display = document.querySelector('#time');
    startTimer(interval, display, 2);
};

<div><span id="time">XX:XX</span></div>