随着时间的流逝，javascript 计时器计数非常快

Question

我想要一个在特定时间间隔内重置的计数器。我写了这段代码。当我刷新页面时，它正在完美执行。但是随着时间的流逝，计时器走得非常快，跳过几秒钟。知道为什么会这样。

function countdown_new() {

    window.setInterval(function () {
        var timeCounter = $("b[id=show-time]").html();
        var updateTime = eval(timeCounter) - eval(1);
        $("b[id=show-time]").html(updateTime);

        if (updateTime == 0) {
            //window.location = ("ajax_chart.php");
            $("b[id=show-time]").html(5);
            clearInterval(countdown_new());
            // countdown_new();
            //my_ajax();
        }
    }, 1000);

}


window.setInterval(function () {
    countdown_new();
}, 5000)

HTML 倒计时5秒

Answer 1

问题是因为您在开始新的计时器之前没有清除前一个计时器，所以每次迭代都会启动一个新的计时器。要清除计时器，您应该保存对它的引用，并将其传递给 clearInterval，而不是函数引用。

另请注意，您对不同操作使用多个间隔的模式可能会导致重叠(其中两个间隔同时起作用并导致奇怪的行为)。相反，使用 setTimeout 进行最初的 5 秒延迟，然后进一步调用以停止这种重叠。

试试这个:

var timer;
function countdown_new() {
    timer = setInterval(function () {
        var $showTime = $("#show-time")
        var updateTime = parseInt($showTime.text(), 10) - 1;
        $showTime.html(updateTime);

        if (updateTime == 0) {
            $showTime.html('5');
            clearInterval(timer);
            setTimeout(countdown_new, 5000);
        }
    }, 1000);    
}

setTimeout(countdown_new, 5000);

Example fiddle

请注意，您应该使用 # 选择器通过其 id 属性选择元素，并且您永远不应该使用 eval - 尤其不要用于类型强制。要将值转换为整数，请使用 parseInt()。