Задержка внутри двойного цикла

#javascript

Привет у меня такой код

const array1 = [1, 2, 3, 4, 5]
const array2 = ['a', 'b', 'c', 'd', 'e']

array1.forEach((chapter, i) => {
    array2.forEach ((article, j) => {
      console.log(`i=${chapter}, j=${article}`);
    })
})


И мне нужно на второй итерации array2 задать цикл, что бы вывод на экран выходил
с одинаковыми по времени задержками

i=1, j=a
// delay
i=1, j=b
// delay
i=1, j=c
// delay
i=1, j=d
// delay
i=1, j=e
// delay
i=2, j=a
// delay
...


Я пробовал разные варианты, например так:

array1.forEach((chapter, i) => {
    array2.forEach ((article, j) => {
      setTimeout(() => {
        console.log(`i=${chapter}, j=${article}`);
      }, 5000*j)
    })
})


вывод получается такой

i=1, j=a
i=2, j=a
i=3, j=a
i=4, j=a
i=5, j=a
// delay
i=1, j=b
...


С одинарным циклом все ясно, как решить задачу с двойным?
    

Ответы

Ответ 1

const array1 = [1, 2, 3, 4, 5];
const array2 = ['a', 'b', 'c', 'd', 'e'];

array1.forEach((chapter, i) => {
    array2.forEach ((article, j) => {
      setTimeout(function(){
        console.log(`i=${chapter}, j=${article}`);
      }, i * 5000 + j * 1000);
    })
})


Ответ 2

Есть еще вот такой вариант.

Основная разница в том, что мы не создаем большое количество отложенных вызовов (setTimeout).
А пользуемся одним.



const array1 = [1, 2, 3, 4, 5];
const array2 = ['a', 'b', 'c', 'd', 'e'];

function show(a1, a2) {
  let i = 0;
  let j = 0;

  function innerShow() {
    console.log(`i=${a1[i]}, j=${a2[j]}`);
    let isContinue = false;
    if (j + 1 < array2.length) {
      j++;
      isContinue = true;
    } else if (i + 1 < array1.length) {
      i++;
      j = 0;
      isContinue = true;
    }
    if (isContinue) {
      setTimeout(innerShow, 10);
    }
  }
  innerShow();
}

show(array1, array2);


Ответ 3

Можно сделать так, с помощью рекурсии:



const array1 = [1, 2, 3, 4, 5];
const array2 = ['a', 'b', 'c', 'd', 'e'];
const showArrayWithDelay = (array1, array2, i = 0, j = 0) => {
  if (!array1[i]) return;
  setTimeout(function() {
    console.log(`i=${array1[i]}, j=${array2[j]}`);
    if (j + 1 === array2.length) {
      showArrayWithDelay(array1, array2, i + 1, 0);
    } else {
      showArrayWithDelay(array1, array2, i, j + 1);
    }
  }, 1000);
}
showArrayWithDelay(array1, array2);