Question

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

开始1秒setInterval和一个包含毫秒的全局变量，然后每个间隔减少-1000。
创建一个从全局变量减少1秒的函数，然后在该函数的底部设置一个{1}}的1秒，该函数将运行该函数，所以基本上每1秒递归一次。

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

这里是两者的示范代码：

setTimeout：

setInterval

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

setTimeout

两种方式都可行，但我想知道性能明智哪个更好，性能甚至是这个问题？

Answer 1

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

从这篇文章：

setTimeout or setInterval?

Answer 2

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

这是example：

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

尝试在同一页面上显示多个倒计时器

2 个答案: