Question

I have a a Membership Counter that needs to update one digit at a time. Below is the function

function siteCounterUpdate(newMembership) {
    var oldMembership = $('span#indexSiteLastMembershipCount').text();
    var digit;
    newMembership = padString(newMembership, 9);
    $('ul#indexSiteCounterBottom').empty();
    for(i=0;i<9;i++) {
            if(newMembership.toString()[i] == '_') {digit = '&nbsp;';}else{digit = newMembership.toString()[i];}
      $('ul#indexSiteCounterBottom').append('<li>'+digit+'</li>');
      $('ul#indexSiteCounterBottom li:nth-child(3n)').addClass('extra-margin');
    }
    $('span#indexSiteLastMembershipCount').text(newMembership);
}

1. it accepts the new membership say – 1010 members
2. it gets the old membership that is kept in a span – say 1000 members
3. it pads the string with nbsp if its less the 9 digits (this relates to the counter images size) – not really important for this quetion and working fine..
4. it then updates the counter and updates the span.

This works but it updates the counter from 1000 to 1010 in one go. I want it to count up one digit at a time. eg: 1001, 1002, 1003 etc…

I believe I need to use setInterval() – maybe 300ms. I just not sure how to fit this into this function so it loops back on itself.

any advice would be great.

thx

Answer 1

Try that:

var log = function(text){
  console.log(text);
  setTimeout(log, 300, text);
};
log("hey!");