Mesuti
@Mesuti

Как ускорить анимацию чисел в зависимости от числа?

Доброе утро!
Есть скрипт анимации числа от 0 до Х
Мелкие цифры нормально увеличивает, но если число больше 2000, то все считается ооочень долго.
https://codepen.io/Alexandr59/pen/NvYzgZ
Как можно увеличить скорость?

p.s. советовали вставить код, где добавляется переменная istep для увеличения шага, но я не смог его вставить без ошибок..

spoiler

{...}
var
i = 1,
istep = 1, // создаем переменную для шага увеличения цифр
num = $(this).data('num'),
step = 1000 * time / num,
that = $(this), inter;
if (num.toString().length > 3) // Если количество цифр больше 3
istep = 8; // то шаг прокрутки будет равен, например, 8
inter = setInterval(function () {
if (i <= num) {
that.html(i);
} else {
cc += 2;
that.html(num); /*! Принудительно устанавливаем конечное значение, тем самым избавляясь от погрешности расчета */
clearInterval(inter);
}
i+=istep; // увеличиваем на заданный шаг переменную
}, step * istep); // умножаем для ускорения увеличения больших цифр
{...}

  • Вопрос задан
  • 134 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Можно задавать шаг отдельно для каждого счётчика, так же, как и максимальное значение - в атрибуте:

<div data-num="2350" data-step="5" class="number">0</div>

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        timeStep = 1000 / num,
        valStep = +this.dataset.step || 1,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.min(i, num));
        }, timeStep, $(this));
    });
  }
});

Или вычислять шаг:

var steps = 100;

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        valStep = num / steps,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.floor(Math.min(i, num)));
        }, 20, $(this));
    });
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы