How to speed up the count down?

Question

I am working on a basic countdown using Javascript where, the countdown starts from 0 and then ends till 24 as thats the idea of the countdown, I want to end it at 24. Here's the code:

var count=0;

var counter=setInterval(timer, 50); //1000 will  run it every 1 second

function timer()
{
  count=count+1;
  if (count >= 24)
  {
     clearInterval(counter);
     //counter ended, do something here
      document.getElementById("countdown").innerHTML=24 ;

     return;
  }

  //Do code for showing the number of seconds here
     document.getElementById("countdown").innerHTML=count ; // watch for      spelling

}

Now the thing is that if you notice this, the countdown happens very fast, this is the intended effect. However the question is this, Is there a way to have a smooth easing type effect, where the countdown starts slowly and then speeds up by the end ? How to achieve that effect ?

Thanks for your response.

EDIT: Here is the fiddle , to see the countdown in action and to gain a deeper insight.

Answer 1

You'll need to use setTimeout instead of setInterval and another variable for setTimeout.

    var count=0;
    var speed = 1000;
    timer();

    function timer()
    {
      count++;

      //Do code for showing the number of seconds here
         document.getElementById("countdown").innerHTML=count ; // watch for      spelling

      if (count >= 24)
      {
         return;
      }

      speed = speed / 6 * 5; // or whatever
      setTimeout(timer, speed);

    }

Fiddle: http://jsfiddle.net/4nnms1gz/2/

Answer 2

Use a timeout which runs only once then add extra time and run the timeout again until you reach 24.

var count=0;
var ms = 200;
var step = 5;
var counter=setTimeout(timer, ms); //1000 will  run it every 1 second

function timer()
{
  count=count+1;
  if (count <= 24)
  {
    //Do code for showing the number of seconds here
     document.getElementById("countdown").innerHTML=count ; // watch for spelling
     ms = ms - step;
     counter = setTimeout(timer, ms);

  }

}

Answer 3

Using setTimeout will give you more control on your counter.Here is a working example where you can handle the speed of your counter.It will give you a time increase of 30ms to 70ms to each call to time function

 var count=0; var loop=1000; var interval; var text=document.getElementById('countdown'); var range=document.getElementById('range'); var btn=document.getElementById('btn'); var span=document.getElementById('val'); range.addEventListener('change',function(e){ span.innerHTML=range.value+' ms'; }); btn.addEventListener('click',function(e){ timer(parseInt(range.value)); }); function timer(time) { console.log(time); if (count < 24) { count=count+1; text.value=count; loop-=time; interval=setTimeout(function(){ timer(time); },loop); if(count>=24){ clearTimeout(interval); return; } } } 

 <input type='text' id='countdown' value='0'></br> <input type='range' id='range' max='70' min='30' value='30' >increase by:<span id='val'></span></br> <input type='button' value='start' id='btn' ></br>