d3 ждать n секунд за итерацию

Question

Я пытаюсь выполнить итерацию синхронно в d3, и жду определенного c количества секунд на итерацию.

years = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
          for (iter = 0; iter <= years.length; iter++) {
              setTimeout(function() {
                console.log(iter);
              }, 5000);
          }

То, что я хочу, это чтобы напечатать 1 , затем подождите 5 секунд, затем напечатайте 2, затем подождите 5 секунд, затем напечатайте 3 и т. д. c.

Я прочитал Для l oop не работает в D3. js, в котором говорится, что при выполнении итерации программа будет переходить к следующему итератору console.log перед завершением первого, поэтому она выполнит их все почти одновременно.

Есть ли способ вывести 1, подождите 5 секунд, напечатайте 2, подождите 5 секунд, напечатайте 3 и т. д. c. ?

Спасибо!

Answer 1

Приведенный ниже фрагмент демонстрирует способ достижения ожидания с помощью рекурсивной функции .

. Вы заметите, что d3 в этом примере вообще не используется - как и разделяемый в вопросе. Если анимация должна выполняться каждые 5 секунд, то использование d3.timeout вместо setTimeout может повысить производительность.

years = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

function processYear(currentIndex) {

  console.log('processing year', years[currentIndex], ' - currentIndex equals', currentIndex)
  
  if (currentIndex < years.length-1) {
    // schedule processing of following year in 5 seconds
    setTimeout(function() {
      processYear(++currentIndex)
    }, 5000)
  }

}

// process first item of the year array
processYear(0)

Answer 2

promise = (val) => new Promise(res => setTimeout(() => {
  console.log(val)
  res()
}, 5000));

(async() => {
  years = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  for (iter = 0; iter <= years.length; iter++) {
    await promise(iter);
  }
})()