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

Question

[Megalexandros]

let number = document.querySelectorAll(".num");

function countNumber(item, num) {
    var count = 0;
    var interval = setInterval(function () {
      if (count === num) {
        clearInterval(interval);
      } else {
        count++;
      }
      item.innerHTML = count;
    }, 20);
}
let numbers = [];
for (let i = 0; i < number.length; i++) {
  numbers.push(parseInt(number[i].innerHTML));
  countNumber(number[i], numbers[i])
}

в данный код надо внести изменения, что бы классы с тегом .num анимировались не сразу (их там 3) а по очереди.
Help please)

Answer 1

[0xD34F]

<div data-value="69"></div>
<div data-value="187"></div>
<div data-value="666"></div>

function animateValue(elem) {
  return new Promise(resolve => {
    const endValue = +elem.dataset.value;
    let currValue = 0;

    const interval = setInterval(() => {
      if (++currValue === endValue) {
        clearInterval(interval);
        resolve();
      }

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


Array
  .from(document.querySelectorAll('[data-value]'))
  .reduce((p, c) => p.then(() => animateValue(c)), Promise.resolve());

https://jsfiddle.net/L9f1a2u5/1/

Comments

[Megalexandros]

Гениально) спасибо, только есть одно НО - не работает в ИЕ. А его поддержка обязательна(

[0xD34F]

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

[Megalexandros]

0xD34F, спасибо!!!!!

[Megalexandros]

0xD34F, Вообщем все супер, но теперь надо что бы одновременно накручивались, а не по очереди, подредактиррую пожалуйста код)

[0xD34F]

Megalexandros, вы, кажется, неправильно понимаете, где находитесь. Данный ресурс - не форум, а ваш вопрос, соответственно - не тема, посвящённая вашим проблемам. Здесь принят другой формат взаимодействия, в идеале он выглядит так: вопрос задан - ответ получен - всё. Дальше, в случае если возникла ещё одна проблема, можно оформить новый вопрос. А если хотите, чтобы кто-то с вами носился до победного конца - идите на фриланс, платите деньги, вам всё сделают.