停止 setTImeout() 函数刷新倒计时

Question

我有一个 javascript 倒计时功能，它工作正常。 但我不知道停止并刷新计时器以延长时间。 当我在超时之前再次调用这个函数时，它的工作非常奇怪。 它显示了两个倒计时时间，因为 updateTimer() 函数仍在工作。 于是上网查了一下，找到clearTimeout()函数来停止这个倒计时。 但我不知道如何应用于此功能。

请帮助我停止并刷新此计时器。

function countdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;


    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    return stopTimer();
}

countdown("countdown", 0, 30);

Answer 1

您需要将setTimeout()存储在变量中。 无法清除匿名超时。

var timeout;

function countdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;


    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            timeout = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    stopTimer();
}

function stopTimer() {
  clearTimeout(timeout);
}

countdown("countdown", 0, 30);

Answer 2

您需要设置一个等于setTimeout(...)返回值的全局变量，然后将此全局变量传递给clearTimeout()函数。
就是这样：

let tm;


function countdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;
    


    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function stopTimer(t) {
        return clearTimeout(t);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            tm = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    return stopTimer(tm);
}

countdown("countdown", 0, 30);