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

示例小提琴

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

Answer 2

您正在调用window.setInterval（），它会在不停止的情况下调度countdown_new（）函数调用5秒。

使问题更复杂的是，您在清除间隔内再次调用countdown_new（）。

您只需调用一次setInterval即可每5秒连续执行一次函数。

如果要取消间隔计时器，则需要执行以下操作：

var intervalObj = setInterval(function() { ... }, 5000);
clearInterval(intervalObj);

Answer 3

是clearinterval就可以了。

       function countdown_new(){

     t =  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(t);
                   // countdown_new();
                    my_ajax();
                }
            }, 1000);

    }