Javascript 倒计时计时器启动时正在丢失一秒钟。我怎样才能避免这种情况？

我正在尝试创建一个倒计时计时器，它从给定的时间开始倒计时，当它达到0时，它会再次开始倒计时

我的代码可以工作（经过多次尝试和错误），但是在启动后的第一秒就丢失了

我的想法是，这不是一个优化的解决方案，需要一秒钟或更长的时间来启动

有没有更好的方法来实现这一点

Javascript:

function startCountdown() {
        var setPlayers = ['Name 1', 'Name 2', 'Name 3'];
        var playersIndex = 0;
        var countdownState = 0;
        var time = 5;
        var messageEl = document.getElementById('message');
        var timer = document.getElementById('timer');

        var standUp = setInterval(function(){

            // if countownState = 0, count down.
            if(countdownState == 0){

                // if all players have been, end the timer
                if(playersIndex == setPlayers.length){
                    clearInterval(standUp);
                    messageEl.innerHTML = 'Finished!';
                    timer.innerHTML = '';

                // if time reaches 0 switch the state and start counting up
                } else if(time == 0) {
                    countdownState = 1;
                    timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(++time%60);

                // usual countdown 
                } else {
                    timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(--time%60);
                }
            // if countownState = 1, count up.
            } else {
                timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(++time%60);
            }
        }, 1000);
    }

我将有一个单独的函数，它增加玩家索引并再次启动计时器

HTML

<div id="timer"></div>
<div id="message"></div>

---

当我加载页面时，计时器看起来是从4开始的，而不是从5开始的。

我将您的间隔调用更新为一个单独的函数。这需要将所有变量移出startCountdown函数，以便它们是全局变量。有更好的方法可以做到这一点，但它会解决你的问题

var setPlayers = ['Name 1', 'Name 2', 'Name 3'];
var playersIndex = 0;
var countdownState = 0;
var time = 5;
var messageEl = document.getElementById('message');
var timer = document.getElementById('timer');

function startCountdown() 
{

    countDown();
    var standUp = setInterval(countDown, 1000);
}

function countDown()
{
    // if countownState = 0, count down.
    if(countdownState == 0)
    {

        // if all players have been, end the timer
        if(playersIndex == setPlayers.length)
        {
            clearInterval(standUp);
            messageEl.innerHTML = 'Finished!';
            timer.innerHTML = '';

            // if time reaches 0 switch the state and start counting up
        } 
        else if(time == 0) 
        {
            countdownState = 1;
            timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(++time%60);

            // usual countdown 
        } 
        else 
        {
            timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(--time%60);
        }
        // if countownState = 1, count up.
    } 
    else 
    {
        timer.innerHTML = pad(parseInt(time/60,10)) + ':' + pad(++time%60);
    }
}

---

请添加相关的HTML，以便我们可以复制您的问题。另外，当字符串不包含任何HTML时，不要使用

.innerHTML

。请改用

.textContent

。另外，请理解

setInterval（）

和

setTimeout（）

不保证函数运行之前的等待时间，因为JavaScript是单线程的。您提供的时间是您可能需要等待的绝对最小时间量。如果您需要更高的精度，请尝试矩.js。

setInterval（）

等待您输入的任何时间，然后继续。将其设置为1000ms，等于1s。因此，正如你所说，为什么它开始晚了1秒<代码>设置超时（函数，毫秒）在等待指定的毫秒数后执行函数

setInterval（函数，毫秒）

与setTimeout（）相同，但会连续重复函数的执行。“计时器看起来是从4开始的，而不是从5开始的。”没错。使用

++time

和

--time

将首先递增/递减该值，然后打印该值。您最初将其设置为5，因此它第一次打印时将为4。如果要先打印值，然后递增/递减，则需要使用后缀递增/递减运算符（

time++

/

time--

）。@Ivar（

time++/time--

）使其按预期运行。