Question

I have a really simple JS counter which I display on a dashboard like screen which does the following:

• Every 5 minutes it makes an jsonp call and retrieves a “total” number
• It then displays this number to the screen by incrementing the last total displayed till it is equal to the new total. (the number can only ever increase)

I’m having some trouble with making the number increment smoothly. What I would like to do is find a delta (i.e. New total – old total) and increment the number gradually over the 5 minutes till the next call so it looks like a nice smooth transition.

Any ideas on how I can do this?

Currently some of my code looks like this (This block get’s called every 5mins. And yes, it’s in dire need of a refactor…)

var LAST_NUMBER_OF_SESSIONS = null;
var five_minutes_in_seconds = 300;
var new_number_of_sessions;

  $.getJSON('http://blah.com/live_stats/default_jsonp.aspx?callback=?', function(data) {
    if(LAST_NUMBER_OF_SESSIONS === null){
      LAST_NUMBER_OF_SESSIONS = data.total_sessions;
    }

    new_number_of_sessions = data.total_sessions;
    var delta = Math.floor(new_number_of_sessions - LAST_NUMBER_OF_SESSIONS);
    var time_interval = (five_minutes_in_seconds / delta) * 1000;
    var old_value = LAST_NUMBER_OF_SESSIONS;
    var new_value = null;

    sessions_interval = setInterval(function (){
      new_value = parseInt(old_value, 10) + 1;
      $('#stats').text(new_value);
      old_value = new_value;
      if(new_value >= new_number_of_sessions){
        clearInterval(sessions_interval);
      }
    }, time_interval);

    LAST_NUMBER_OF_SESSIONS = new_value;
  });
}

This code it seems to increment the number very quickly at the start of the 5min period and then stop so it’s not exactly right…

Answer 1

Try this:

var total = 0,
    delta = 0,
    stats = $('#stats').text( total );

function increment() { 
    var v = +stats.text();

    if ( v < total ) {
        stats.text( v + 1 );           
    } else {
        $.getJSON('http://...', function(data) { // added data here        
            delta = Math.floor( 300000 / ( data.total_sessions - total ) );  
            total = data.total_sessions;
        });        
    }

    setTimeout(increment, delta);
}

---

Update:

In order to test my code, I had to simulate the JSON reponse – I used an array of numbers. See here: http://jsfiddle.net/simevidas/MwQKM/

(In the demo, I use an interval of 5 seconds instead of 5 minutes.)