停止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) {&nbsp; &nbsp; var element, endTime, hours, mins, msLeft, time;&nbsp; &nbsp; function twoDigits(n) {&nbsp; &nbsp; &nbsp; &nbsp; return (n <= 9 ? "0" + n : n);&nbsp; &nbsp; }&nbsp; &nbsp; function updateTimer() {&nbsp; &nbsp; &nbsp; &nbsp; msLeft = endTime - (+new Date);&nbsp; &nbsp; &nbsp; &nbsp; if (msLeft < 1000) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = "00:00";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time = new Date(msLeft);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hours = time.getUTCHours();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mins = time.getUTCMinutes();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timeout = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; element = document.getElementById(elementName);&nbsp; &nbsp; endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;&nbsp; &nbsp; updateTimer();&nbsp; &nbsp; stopTimer();}function stopTimer() {&nbsp; clearTimeout(timeout);}countdown("countdown", 0, 30);

Answer 2

您需要设置一个全局变量等于 的返回值setTimeout(...)，然后将该全局变量传递给clearTimeout()func。就是这样：let tm;function countdown(elementName, minutes, seconds) {&nbsp; &nbsp; var element, endTime, hours, mins, msLeft, time;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function twoDigits(n) {&nbsp; &nbsp; &nbsp; &nbsp; return (n <= 9 ? "0" + n : n);&nbsp; &nbsp; }&nbsp; &nbsp; function stopTimer(t) {&nbsp; &nbsp; &nbsp; &nbsp; return clearTimeout(t);&nbsp; &nbsp; }&nbsp; &nbsp; function updateTimer() {&nbsp; &nbsp; &nbsp; &nbsp; msLeft = endTime - (+new Date);&nbsp; &nbsp; &nbsp; &nbsp; if (msLeft < 1000) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = "00:00";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time = new Date(msLeft);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hours = time.getUTCHours();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mins = time.getUTCMinutes();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tm = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; element = document.getElementById(elementName);&nbsp; &nbsp; endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;&nbsp; &nbsp; updateTimer();&nbsp; &nbsp; return stopTimer(tm);}countdown("countdown", 0, 30);