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

javascript timer counting very fast as time passes

本文关键字：计时器 非常 JavaScript 时间 流逝      更新时间：2023-09-26

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

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秒内完成

问题是因为在启动新计时器之前没有清除以前的计时器，因此每次迭代都会启动一个新计时器。要清除计时器，您应该保存对它的引用，并将其传递给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() 。

您正在调用 window.setInterval（），它每 5 秒调度一次对 countdown_new（） 的函数调用，而不会停止。

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

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

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

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

是的，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);
    }
相关文章：