Question

我编写了一个简单的JavaScript计时器，但我注意到它以1/3的速度运行。该计时器用于跟踪已经过多少MS。我不确定我做错了什么。

time = 10000;
timer = setInterval( function() {
    time--;
    $('#timer').text(time);
}, 1);

Answer 1

您的错误在于假设您的计算机可以保留1毫秒的计时器。

某些浏览器将使用计算机的时钟，在Windows中每隔16ms（1/60秒，即屏幕的帧速率）进行计时。其他人将覆盖这个更准确的3ms，这就是为什么你看到1/3速度的结果。

相反，请使用Delta Timing：

var start = new Date().getTime();
setInterval(function() {
    var now = new Date().getTime();
    var elapsed = now-start;
    var timeleft = 10000-elapsed; 
    $("#timer").text(timeleft);
},25);

Demo

Answer 2

每毫秒启动一个函数会很快堵塞浏览器。毕竟，jQuery正在执行DOM操作，它确实需要一个真正的游戏中时光倒流，即使很小。

你应该：

以更高的间隔开火，
而不是跟踪全局时间变量，使用浏览器当前时间戳new Date().getTime()
将功能添加到堆栈以避免自身成为障碍

类似的东西：

var time=new Date().getTime()+10000;
timer = setInterval( function() {
    setTimeout(function() {
        var timediff=time-new Date().getTime();
        $('#timer').text(timediff);
    },0);
}, 100);

将超时设置为0会立即触发它，除非在堆栈中排队了。

JS - 计时器运行缓慢

2 个答案: