VUE: Как можно менять значение в data с задержкой в одну секунду перебирая массив из data?

Question

[Евгений Силкин]

Добрый день!

Подскажите, пожалуйста, как можно реализовать следующий функционал?

У меня есть массив значений myList и вспомогательное значение step в data.

data() {
    return {
      myList: [1, 2, 1, 3, 4],
      step: 0,
    };
  },

Необходимо, чтобы при переборе значений из массива значение в step менялось с задержкой. Это нужно, для того, чтобы элементы на страницы под определенным номером загорались, когда их номер будет присвоен значению step.

Моя попытка:

methods: {
    onStart() {
      this.myList.forEach((item) => {
        setTimeout(() => {
          this.step = item;
        }, 1000);
      });
    },
}

По итогу горит сразу последний элемент.

Answer 1

[Rsa97]

Вы не понимаете, как работает setTimeout. Эта функция не останавливает выполнение кода, а создаёт в отдельном потоке таймер, который через заданное время положит вызов callback-функции в очередь выполнения JS. В результате вы практически одновременно создаёте все таймеры, и они одновременно срабатывают.
Для циклических вещей используется либо рекурсивный вызов setTimeout, либо, что гораздо лучше, setInterval.

onStart() {
  let idx = 0;
  const timer = setInterval(
    () => {
      this.step = this.myList[idx];
      idx += 1;
      if (idx >= this.myList.length) {
        clearInterval(timer);
      }
    },
    1000,
  );
}

Comments

[Евгений Силкин]

Спасибо! С setInterval я как раз сделал, но вот не пойму как c timeOut... Есть возможность продемонстрировать циклический варианта, пожалуйста?

[Rsa97]

onStart() {
  let idx = 0;
  const stepFunction = () => {
    this.step = this.myList[idx];
    idx += 1;
    if (idx < this.myList.length) {
      setTimeout(stepFunction, 1000);
    }
  }
  setTimeout(stepFunction, 1000);
}

[Евгений Силкин]

Rsa97, спасибо большое)