title: Increment number of amount with animate
body: <p>I'm trying to increment a number inside an element on page. But I need the number to include a comma while the increment only will increase 1 digit per second. </p>
  
  <p>I have the code working but I'm kinda stuck not sure where to set the increment which only increase 1 digit per second (eg: <code>10,100,040</code> then <code>10,100,041</code> and so on) </p>
  
  <pre><code>&lt;script&gt;&lt;/script&gt;
  &lt;div id="el"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Animate the element's value from x to y:
  $({
      someValue: 40
  }).animate({
      someValue: 45000000
  }, {
      duration: 3000,
      easing: 'swing', // can be anything
      step: function() { // called on every step
          // Update the element's text with rounded-up value:
          $('#el').text(commaSeparateNumber(Math.round(this.someValue)));
      },
      complete: function(){
          $('#el').text(commaSeparateNumber(Math.round(this.someValue)));
      }
  });
  
  function commaSeparateNumber(val){
      while (/(\d+)(\d{3})/.test(val.toString())){
          val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
      }
      return "$" + val;
  }
  </code></pre>