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>