Jquery number counter for updates

Question

I have this jquery functions. I want to make it just one function so I can get thesame results by just calling a function and passing some arguements.

As you can see, the function does basically the same thing counting numbers. I would love to just have one function , then parse out arguments to get the same results. something like startcount(arg1, arg2);

var one_countsArray = [2,4,6,7,4252];
var two_countsArray = [3,3,4,7,1229];

var sumemp = one_countsArray.reduce(add, 0);
 var sumallis = two_countsArray.reduce(add, 0);

  function add(a, b) {
      return a + b;
  }
  var count = 0;

  var inTv = setInterval(function(){startCount()},100);

  var inTv2 = setInterval(function(){startCount2()},100);

  function startCount()
  {
      if(count == sumemp) {
          clearInterval(inTv);
      } else {
          count++;
      }
      $('.stats_em').text(count); 
     
  }

  var count2 = 10;
  function startCount2()
  {
      if(count2 == sumallis) {
          clearInterval(inTv2);
      } else {
          count2++;
      }
      $('.stats_iss').text(count2); 
  }

div {
  padding:50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height:100px;
  border-radius:50%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="stats_em"></div>
<div class="stats_iss"></div>

Answer 1

When you notice you're rewriting chunks of similar code, moving to one generic function is the right approach! The best way to start is by trying to determine what you're parameters would be:

• count and count2 show that you need a start count for your timer to start at
• sumemp and sumpallis show that you need to be able to specify a maximum count
• inTv and inTv show that you need to be able to set the interval
• $('.stats_iss') and $('.stats_em') show that you need to be able to determine the output element

This means your final class, function or jquery extension will at least have a signature that resembles this:

function(startCount, maximumCount, interval, outputElement) { }

Once you've written this, you can paste in the code you already have. (I've replaced your setInterval with a setTimeout, other than that, not much changed)

var createCounter = function(start, max, interval, outputElement) {
  var count = start;
  var timeout;

  var start = function() {
    count += 1;
    outputElement.text(count);
    if (count < max) {
      timeout = setTimeout(start, interval);
    }
  }

  var stop = clearTimeout(timeout);

  return {
    start: start,
    stop: stop
  }
}

var one_countsArray = [2, 4, 6, 7, 300];
var two_countsArray = [3, 3, 4, 7, 100];

var sumemp = one_countsArray.reduce(add, 0);
var sumallis = two_countsArray.reduce(add, 0);

function add(a, b) {
  return a + b;
}

var counters = [
  createCounter(0, sumemp, 100, $('.stats_em')),
  createCounter(10, sumallis, 100, $('.stats_iss'))
];

counters.forEach(function(counter) {
  counter.start();
});

div {
  padding: 50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="stats_em"></div>
<div class="stats_iss"></div>

Answer 2

How about a very simple jquery plugin

$.fn.countTo = function(arrNums){
   var self = this;
   function add(a,b){
       return a+b;  
   }
  
   var current = 0;
   var max = arrNums.reduce(add,0);
  
   var int = setInterval(function(){
       if(current == max)
         clearInterval(int);
       else
         current++;
     
     self.text(current);
   },100);
  return this;
}


$('.stats_em').countTo([2,4,6,7,4252]);
$('.stats_iss').countTo([3,3,4,7,1229]);

div {
  padding:50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height:100px;
  border-radius:50%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="stats_em"></div>
<div class="stats_iss"></div>