Megalexandros
@Megalexandros
Задаю самые тупые вопросы.

Как анимировать элементы одновременно?

function animateValues(elems) {
  var i = 0;

  function animateValue() {
    var elem = elems[i++];
    if (elem) {
      var endValue = +elem.dataset.value;
      var currValue = 0;

      var interval = setInterval(function() {
        if (++currValue === endValue) {
          clearInterval(interval);
          animateValue();
        }

        elem.innerText = currValue;
      }, 20);
    }
  }

  animateValue();
}


animateValues(document.querySelectorAll('[data-value]'));

в данном коде они анимируются по очередно
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
RAX7
@RAX7
function animateValues(elems) {
  elems = Array.from(elems);
  const endValues = elems.map(el => Number(el.dataset.value));
  const currValues = new Array(elems.length).fill(0);
  
  function loop() {
    let doneCount = 0;
    for (let i = 0; i < elems.length; i++) {
      if (currValues[i] === endValues[i]) {
        doneCount++;
      }
      else {
        currValues[i]++;
        elems[i].innerText = currValues[i];
      }
    }
    
    if (doneCount !== elems.length) setTimeout(loop, 20);
  }
  
  setTimeout(loop, 0);
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Попробуйте так:
const animateElement = (el) => {
  const endValue = +el.dataset.value;
  let currValue = 0;

  const update = () => {
    el.innerText = ++currValue;
    if (currValue < endValue) {
      setTimeout(update, 20);
    }
  }

  update();
}

[...document.querySelectorAll('[data-value]')].forEach(animateElement);
Тут неоптимальный момент, обилие часто создаваемых Timeout'ов: при большом количестве элементов и короткой задержке может тормозить. Альтернативный вариант сделать единые общие «часы» обновляющие, при необходимости, каждого участника коллекции.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект