CODEWITHSUNDEEP
javascriptloopstimersettimeoutcountdown
Sina Amini
Sina Amini

Reputation: 5

How to put this timer in a loop? JS

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

How can I place this code in a loop? It's basically a timer which starts at 60 and ends at 0, and when that happens, the game restarts. I have no problem with the game restarting, but I just don't know how to put this code on a loop. I have looked in codeacademy and it says for a loop I have to use

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

where x is the start y is where it ends and z is how does it change. Please help me work this out, I'm a little confused.

Upvotes: 0

Views: 1798

Answers (4)

SansWord
SansWord

Reputation: 91

first of all, don't use counter-base count-down in javascript, since setTimeout(foo, 1000) is not that accurate then you thought. FYI: http://ejohn.org/blog/how-javascript-timers-work/

to modify your code so it can countdown properly, try the following instead:

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

to have this code in a loop, it might be good to wrapped it as an object and pass what you want to do after countdown is over.

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

so every time you want to have a counter, you can get a new counter and start countdown whenever you want. example:

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

Hope it helps.

Upvotes: 0

baao
baao

Reputation: 73241

This will do what you want: 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();

Upvotes: 0

David
David

Reputation: 733

You might want to look into using setInterval. It calls a given function every n millaseconds. You could structure your countdown function like so:

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

Upvotes: 2

justinpinili
justinpinili

Reputation: 894

You would just need to place this code in a javascript file that is referenced in your html file. Or you can just wrap this javascript code in a <script> </script> tag. This should make the code run when you load the webpage.

If you are trying to make the function countdown() run in a loop based on time, you can also try setInterval(countdown(), time_in_milliseconds);

setInterval will run the passed in function every x milliseconds.

Upvotes: 0

Related Questions