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

Question

[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]'));

в данном коде они анимируются по очередно

Answer 1

[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);
}

Answer 2

[Сергей Соколов]

Попробуйте так:

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'ов: при большом количестве элементов и короткой задержке может тормозить. Альтернативный вариант сделать единые общие «часы» обновляющие, при необходимости, каждого участника коллекции.