Counter up to a specific number

Question

I have three counters, which go up to a certain number, set in data-count-to of each tag, my problem here is that I would like them to reach their limit at the same time, even with values as different as is the case below:

function count_up(ele, count_to, timer, i) {
	if(i > count_to) {
		return;
	}
	ele.text(i.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."));
	i += 1;
	/*console.log(timer);*/
	setTimeout(function() {count_up(ele, count_to, timer, i)}, timer);
}
$('.counter-up').each(function() {
	count_to = parseInt($(this).data('countTo'));
	timer = parseInt(40000/count_to);
	count_up($(this), count_to, timer, 0)
});

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

<div>
  <span class="counter-up" data-count-to="5684"></span>
</div>
<div>
  <span class="counter-up" data-count-to="6603146"></span></div>
<div>
  <span class="counter-up" data-count-to="20362"></span>
</div>

Now, I think my problem is math in this case, because I suspect I also have to tinker with the amount to increase as well, and not just in time.

I would like the end result to be only that the argument to be varied is time, but with any time that the three counters reach the end at the same time

Answer 1

It is really a question of mathematics. My resolution proposes to increase the right amount in each timer, so that they all end at the same time.

For that it is necessary:

• Know the total time of the animation and the time between each "frame" of the animation
• Divide the counter number by the total amount of "frames" of the animation that will give how much each counter should increase to finish at the right time.

Everything else is what I already had, despite having removed the function because it is a very short code and I changed the setTimeout for setInterval.

Look how it turned out:

const tempo_intervalo = 5; //ms -> define a velocidade da animação
const tempo = 4000; //ms -> define o tempo total da animaçao

$('.counter-up').each(function() {  
  let count_to = parseInt($(this).data('countTo'));
  let intervalos = tempo / tempo_intervalo; //quantos passos de animação tem
  let incremento = count_to / intervalos; //quanto cada contador deve aumentar
  let valor = 0;
  let el = $(this);
  
  let timer = setInterval(function() {
    if (valor >= count_to){ //se já contou tudo tem de parar o timer
      valor = count_to;
      clearInterval(timer);
    }
    
    let texto = valor.toFixed(0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
    el.text(texto);
    valor += incremento;      
  }, tempo_intervalo);
});

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

<div>
  <span class="counter-up" data-count-to="5684"></span>
</div>
<div>
  <span class="counter-up" data-count-to="6603146"></span></div>
<div>
  <span class="counter-up" data-count-to="20362"></span>
</div>