如何将此计时器置于循环中？ JS答案

【问题标题】：How to put this timer in a loop? JS如何将此计时器置于循环中？ JS
【发布时间】：2014-11-26 03:21:26
【问题描述】：

  function countdown() {
        var secs = 60;
        function timer() {
            var counter = document.getElementById("counter");
            secs--;
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                alert("Game over, you did not get to finish the game on time :( ");
                document.getElementById('memory_board').innerHTML = "";
                        newBoard();
            }
        }
        timer();
    }

    countdown();

如何将此代码放入循环中？它基本上是一个从 60 开始到 0 结束的计时器，当这种情况发生时，游戏重新开始。我对游戏重新启动没有任何问题，但我只是不知道如何将此代码放在循环中。我查看了 codeacademy，它说我必须使用一个循环

for (var x; y;z ) {
    //code
}

x 是起点，y 是终点，z 是如何变化的。请帮我解决这个问题，我有点困惑。

【问题讨论】：

标签： javascript loops timer settimeout countdown

【解决方案1】：

您可能想考虑使用setInterval。它每 n 毫秒调用一个给定的函数。您可以像这样构建倒计时功能：

function countdown(seconds) {
    var interval = setInterval(function() {
        if (seconds < 0) clearInterval(interval); //break the interval
        seconds--;
        //code
    }, 1000); //time in millaseconds to wait
}

【讨论】：

【解决方案2】：

您只需将此代码放在您的 html 文件中引用的 javascript 文件中。或者，您可以将此 JavaScript 代码包装在 <script> </script> 标记中。这应该使代码在您加载网页时运行。

如果你想让函数countdown()基于时间循环运行，你也可以试试setInterval(countdown(), time_in_milliseconds);

setInterval 将每 x 毫秒运行一次传入的函数。

【讨论】：

【解决方案3】：

这会做你想做的事：DEMO

   setInterval(function() {
    countdown();
    },60000);

function countdown() {
        var secs = 60;
        function timer() {
            var counter = document.getElementById("counter");
            secs--;
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                alert("Game over, you did not get to finish the game on time :( ");
                document.getElementById('memory_board').innerHTML = "";
                        newBoard();
            }
        }
        timer();
    }

    countdown();

【讨论】：

OP 希望计数器每秒减少一次，您提供的代码每分钟运行一次函数，而不减少计数器。
对不起，但你真的应该在投反对票之前再次阅读并理解代码，也许可以用 DEMO 尝试一下，看看它是否完全符合 OP 的要求......@David

【解决方案4】：

首先，不要在 javascript 中使用 counter-base 倒计时，因为 setTimeout(foo, 1000) 并没有你想象的那么准确。仅供参考：http://ejohn.org/blog/how-javascript-timers-work/

要修改您的代码以使其正确倒计时，请尝试以下操作：

function countdown() {
    var secs = 60,
        startTime = new Date().getTime(), // <-- new here
        endTime = startTime + secs * 1000; // <-- new here
    function timer() {
        var counter = document.getElementById("counter");
        secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here
        counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
        if( secs > 0 ) {
            setTimeout(timer, 1000);
        } else {
            alert("Game over, you did not get to finish the game on time :( ");
            document.getElementById('memory_board').innerHTML = "";
                    newBoard();
        }
    }
    timer();
}

countdown();

要将这段代码放在一个循环中，最好将它包装为一个对象并传递你的倒计时结束后想做的事。

function newCounter(_secs, _callback) {
    var executeWhenEnd = _callback,
        secs = _secs;
    function countdown() {
        var startTime = new Date().getTime(), // <-- new here
            endTime = startTime + secs * 1000; // <-- new here
        function timer() {
            var counter = document.getElementById("counter");
            secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here
            counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs);
            if( secs > 0 ) {
                setTimeout(timer, 1000);
            } else {
                callback();
            }
        }
        timer();
    }
    return {
        countdown: countdown
        };
}

所以每次你想要一个计数器，你可以得到一个新的计数器并开始倒计时无论你什么时候想要。示例：

var counter1 = newCounter(60, function(){
         //fire after 60 seconds
         alert("Game over, you did not get to finish the game on time :( ");
         document.getElementById('memory_board').innerHTML = "";
         newBoard();
    }),
    counter2 = newCounter(5, function() {
        //fire after 5 seconds.
    });
counter1.countdown(); // start countdown
counter2.countdown(); // start countdown

希望对你有帮助。

【讨论】：