0

我正在尝试在同一页面上显示几个倒数计时器。现在据我所知，有两种方法可以在不使用 jquery 插件或其他脚本的情况下做到这一点（如果你知道一个好的方法，请告诉我）

  1. 从 1 秒开始setInterval，一个包含毫秒的全局变量，然后每个间隔减少 -1000。

  2. 创建一个从全局变量减少 1 秒的函数，然后在该函数的底部将 a 设置setTimeout为 1 秒，该函数将运行该函数，因此基本上每 1 秒递归一次。

我的问题是这两个选项中的哪一个会更好和/或更快？

这是两者的演示代码：

setInterval：

var amount_of_seconds_left = 46800000;

setInterval(function(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
}
},1000);

setTimeout：

var amount_of_seconds_left = 46800000;
function startTime(){
if(amount_of_seconds_left > 1000){
    amount_of_seconds_left -= 1000;
    t=setTimeout(function(){startTime()},1000);
}
}

两种方法都可以，但我想知道性能方面哪个更好，性能甚至是这个问题吗？

4

2 回答 2

0

我相信 setInterval 代码恰好每 1000 毫秒执行一次，而 setTimeout 等待 1000 毫秒，运行该函数，这需要一些毫秒，然后设置另一个超时。所以等待时间实际上大于1000ms。

从这篇文章：

设置超时或设置间隔？

于 2012-11-26T07:32:44.913 回答
0

setInterval并且setTimeout不要在 1000 毫秒后启动，例如如果另一个脚本正在运行，那么两者都会导致延迟。最好使用setIntervall仅调用显示更新并使用Date对象来计算确切的剩余时间。例如，在浏览器忙碌之后，计时器会在下次更新后显示正确的时间。

这里有一个例子：

HTML：

<div id="timer1"></div>
<div id="timer2"></div>

javascript:

// update all timer
function updateTimer() {
    for (var i in aTimer) {
        var oTimer = document.getElementById(aTimer[i].sId);
        var iSeconds = parseInt((aTimer[i].iFinished - Date.now()) / 1000);
        oTimer.innerHTML = iSeconds;
    }
}

// Init all timers with DOM-id and finish time
var aTimer = [
    { sId: 'timer1', iFinished: Date.now() + 46800000 },
    { sId: 'timer2', iFinished: Date.now() + 780000}
];

// call display update
setInterval(function() {
    updateTimer();
}, 333);
于 2012-11-26T08:18:47.947 回答