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

130

22 августа 2019, 13:10

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

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
...

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

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

Answer 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);

Answer 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);