Question

我正在尝试创建一个倒计时计时器，该计时器从给定时间开始倒计时，当它到达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。

Answer 1

我将您的间隔呼叫更新为单独的功能。这将需要将所有变量移出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);
    }
}

倒数计时器启动时会损失一秒钟。如何避免这种情况？

1 个答案: