im trying to make a simple javascript countdown timer which changes the value from 3 to 1 in the button every one second interval. I got the code working but it uses many functions. I was wondering if i could make it using less. ive tried to put the countdown in a for loop which displays the i value but it doesn't seem to work properly.

Heres my code:

 function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown3()", 1000 );
}
function countdown3()
{
    document.getElementById("blast").value = "3";
    setTimeout("countdown2()", 1000);
}
function countdown2()
{
    document.getElementById("blast").value = "2";
    setTimeout("countdown1()", 1000);
}

function countdown1()
{
document.getElementById("blast").value = "1";
setTimeout("GO()", 1000 );
}
function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}

im trying to make a simple javascript countdown timer which changes the value from 3 to 1 in the button every one second interval. I got the code working but it uses many functions. I was wondering if i could make it using less. ive tried to put the countdown in a for loop which displays the i value but it doesn't seem to work properly.

Heres my code:

 function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown3()", 1000 );
}
function countdown3()
{
    document.getElementById("blast").value = "3";
    setTimeout("countdown2()", 1000);
}
function countdown2()
{
    document.getElementById("blast").value = "2";
    setTimeout("countdown1()", 1000);
}

function countdown1()
{
document.getElementById("blast").value = "1";
setTimeout("GO()", 1000 );
}
function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}

• javascript
• refactoring
• settimeout

Share Improve this question Follow edited Apr 5, 2012 at 8:39 Willem D'Haeseleer 20.2k1010 gold badges6868 silver badges103103 bronze badges asked Apr 5, 2012 at 7:49 WaiwhetuWaiwhetu 2155 bronze badges 3

• 2 Please do not pass a string to setTimeout; use a function instead: setTimeout(countdown3, 1000); or if you need to pass some arguments setTimeout(function() { whatever('foo'); }, 1000); - passing a string is as bad as using eval! – ThiefMaster Commented Apr 5, 2012 at 7:51
• At first i didnt pass them as a string but it didnt work until i did – Waiwhetu Commented Apr 5, 2012 at 8:08
• 1 You probably used setTimeout(countdown(), ...) which indeed doesn't work. That passes the return value of the function which is not a function anymore in your case. – ThiefMaster Commented Apr 5, 2012 at 8:12

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

How about this :

function launch(seconds, id, message, callback)
{
    var target = document.getElementById(id);
    target.innerHTML = message;

    var countDownId = setInterval( function(){
       target.innerHTML = seconds;
       if(seconds == 0){
          clearInterval(countDownId);
          callback(target);          
       }
       seconds--;
    }, 1000 );

}

function GO(target)
{
    target.innerHTML = "BLAST OFF";
    move();
}

launch(3, "blast", "Preparing to launch...", GO);

How about this:

function launch( )
{
    var countdown = function (index) {
        if(index > 0) {
          document.getElementById("blast").value = index;
          setTimeout (function() { countdown(index - 1) }, 1000 );
        }
        else {
          document.getElementById("blast").value = "BLAST OFF";
          move();
        }  
    };

    document.getElementById("blast").value = "Preparing to launch...";
    setTimeout (function() { countdown(3) }, 1000 );
}

something like this?

var i = 4;
document.getElementById("blast").value = 'Preparing to launch...';
function doIt(){
  var timerId = setInterval(function(){
    i--;
    if( i > 0 )
       document.getElementById("blast").value = i;
    else {
       document.getElementById("blast").value = 'BLAST OFF'; 
       clearInterval(timerId);
    }
  },1000);
}

Here's a generic way that works with any messages, not just a countdown. Obviously it's not a good thing if you have longer countdowns - but with your current message-to-counter ratio I'd say it's a good solution:

function launch() {
    var elem = document.getElementById('blast');
    var step = 0;
    var messages = ['Preparing to launch', '3', '2', '1', 'LIFTOFF'];
    window.setTimeout(function() {
        elem.value = messages[step++];
        if(step < messages.length) {
            window.setTimeout(arguments.callee, 1000);
        }
    }, 1);
}

launch();

Demo: http://jsfiddle/ThiefMaster/qmBXs/

Try using recursion, something like:

var blast = document.getElementById("blast");
countdown();

function countdown() {
 var nwvalue = Number(blast.value)-1; 
 blast.value = nwvalue;
 if (nwvalue>0) {
  setTimeout(countdown, 1000 ); //- value>0: call countdown in a timeout again
 } else {
  blast.value = 'all done';     //- here you would call GO()
 }
}

See this jsfiddle

This works (tested on chrome)

function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown(3)", 1000 );
}

function countdown(index)
{
    if(index==0) {
         GO();
         return
    }

    document.getElementById("blast").value = index;
    setTimeout("countdown("+(--index)+")", 1000);
}

function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}

I tested this solution in the Chrome Debugger tools. Replace the document.getElementById properties with console.info and run it in the debugger to see the output on the console.

function countdown(start, duration) {

    if(start == duration) {
        setTimeout(function() {
            document.getElementById("blast").value = "BLAST OFF";
            // console.info("BLAST OFF");
        },duration * 1000);
        return;
    } else {

        setTimeout(function() {

            document.getElementById("blast").value = start;
            // console.info(start);

        }, (duration-start) * 1000);
        countdown(start+1, duration);
    }    

}

countdown(0,3);  // 3 seconds

var i =3;
function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( function() { countDown() }, 1000 );
}
function countDown()
{
if(i<0)
   i="blast off";
document.getElementById("blast").value = i;
i--;
setTimeout("countDown()",1000);

}

try this