Как запускать подсчет цифер при открытие tabs?

Question

[Антон Вебсайтовский]

Всем привет.
Во вкладки tabs, добавил js скрипт и вывел подсчет цифер, от 0 и до нужного значения, эффект так скажем такой.
Как сделать, чтобы при клике на вкладку табс, эффект запускался отдельно, а не как щас, не кликая на открыть табс, тупо подсчет идет во всех вкладках.

Рабочая схема тут:
https://codepen.io/AXOT/pen/eYPNqrM

Answer 1

[Stalker_RED]

<pre id="cont">0</pre>
<button id="btnStart">start</button>
<pre id="cont2">0</pre>
<button id="btnStart2">start</button>

<script>
btnStart.onclick = function(){
  autoCounter('#cont', 0, 10050, 12.7);
};
btnStart2.onclick = function(){
  autoCounter('#cont2', 100500, 200000, 300);
};

function autoCounter(selector, from, to, step) {
  const container = document.querySelector(selector);
  let currValue = from;
  tick();

  function tick() {
    if (currValue < to) {
      currValue += step;
      if (currValue > to) {
        currValue = to;
      }
      container.textContent = Math.round(currValue);
      window.requestAnimationFrame(tick);
    }
  }
}

</script>

Comments

[Антон Вебсайтовский]

Спасибо, хороший пример.
autoCounter это функция пересчета? а скорость в ней не существует, ну с какой он будет считать.

[Stalker_RED]

Антон Вебсайтовский, там четыре параметра, все подписаны.
Селектор элемента куда выводить результат, стартовое значение, конечное значение и шаг - то есть сколько прибавлять за каждый тик.

Сами тики привязаны на частоту кадров в браузере, обычно это 60Гц.
Можно вместо requestAnimationFrame использовать sertTimeout или setInterval, тут в принципе не важна плавность отрисовки, и можно не попадать в каждый кадр.

Ну или просто ставьте step поменьше.

[Антон Вебсайтовский]

Я немного не понял, autoCounter('#cont', 0, 10050, 12.7);
Как мне мои числа вписать, а то тут их 3 целых, через запятую.

Схема рабочая тут с вашим скриптом.
https://codepen.io/AXOT/pen/rNqezLL

[Антон Вебсайтовский]

А все дошло, первое число от от какого считать и по какое, второй это конечное число, третье число это скорость подсчета.

[Stalker_RED]

Антон Вебсайтовский,
они подписаны же
autoCounter(selector, from, to, step)