setTimeout в цикле for (1 тайм-аут, затем цикл одновременно) (двойной цикл)

Question

Я последовал за ответом на в этом посте , однако, мне кажется, это не работает.У меня есть первый двумерный массив, я хочу установить таймаут между каждым внешним циклом, а не тайм-аут во внешнем цикле.

Вот фрагмент кода этой скрипки , показывающий один из трех способов, которые я пробовализ вышеупомянутого вопроса, а также этого (ср. случаи 1, 2 и 3).

    var data = [
                [
                    ["data[0][0]"],  
                    ["data[0][1]"]
                ],
                [
                    ["data[1][0]"],
                    ["data[1][1]"]
                ],
                [
                    ["data[2][0]"],
                    ["data[2][1]"]
                ]
            ];	

    var delay = 1000;
    
        function doSomething(i) {
    	setTimeout(function() {
      	for(let j = 0; j < data[i].length; j++) {
        console.log(data[i][j]);
        $('#result').html($('#result').html() + data[i][j]);
        }
      }, delay);
    }
    
    for(let i = 0; i < data.length; i++) {
    	doSomething(i);
    }

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <div id="result"></div>

Больше вопросов / ответов по этому вопросу, как правило, дают тот же результат, поэтому я в растерянности.

Answer 1

Другое решение этой проблемы (с использованием рекурсивной идеи) заключается в реализации метода, который вызывает сам себя каждые 1 second до достижения последней итерации (условие прерывания), когда index массива outter равен егодлина:

var data = [
  [["data[0][0]"], ["data[0][1]"]],
  [["data[1][0]"], ["data[1][1]"]],
  [["data[2][0]"], ["data[2][1]"]]
];

function doSomething(i, delay)
{
    // Break condition.

    if (i >= data.length)
        return;

    // Print the inner array.

    data[i].forEach(x =>
    {
        console.log(x);
        $('#result').html($('#result').html() + x);
    });

    // Call to itself after some time to execute next iteration.

    setTimeout(() => doSomething(i + 1, delay), delay);
}

// Start the procedure.

doSomething(0, 1000);

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="result"></div>

Answer 2

Проблема в том, как работает setTimeout.Это не команда sleep, где она останавливает цикл for.Скорее, он проходит через начальный цикл for и запускает три таймера примерно в одно и то же время, чтобы длиться по одной секунде каждый.Это означает, что они также заканчиваются примерно в одно и то же время.

Вы можете получить желаемый результат, сделав что-то более похожее на это (обратите внимание на i*delay для таймера на setTimeout. Таким образом, ваш первый таймердля 0 мс, второй для 1000 мс, третий для 2000 мс, и вы получите пораженные результаты, которые вы ищете.

var data = [
  [
    ["data[0][0]"],
    ["data[0][1]"]
  ],
  [
    ["data[1][0]"],
    ["data[1][1]"]
  ],
  [
    ["data[2][0]"],
    ["data[2][1]"]
  ]
];

var delay = 1000;

function doSomething(i) {
  setTimeout(function () {
    for (let j = 0; j < data[i].length; j++) {
      console.log(data[i][j]);
      $('#result').html($('#result').html() + data[i][j]);
    }
  }, i*delay);
}

for (let i = 0; i < data.length; i++) {
  doSomething(i);
}

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <div id="result"></div>