停止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()func。

就是这样：

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