Бесконечный цикл в React с использованием таймаута

Question

У меня есть эта функция, которая печатает значения массива urls, первое, что я хочу сделать, это запустить forloop неопределенно долго, а во-вторых, я не понимаю, почему журнал консоли 'done' выполняется передцикл:

loop = () => {
        for (var i = 0; i < urls.length; i++) {
            (function(index) {
                setTimeout(function() {
                    console.log(urls[index]);
                }, i * 1000);
            })(i);
        }
        console.log('done');        
};

Я пытался обернуть эту функцию в другой forloop, но каждый раз я получал (в этом примере) 3 значения, что не является моей целью, мне просто нужно повторить цикл.

for (var a = 1; a <= 3; a++) {
  setTimeout(() => this.loop(), 21000);
}

// Not working ( the urls.length = 21 so that's exactly 21 seconds )

while (true) {
  setTimeout(() => this.loop(), 21000);
}

// Freeze too much ram

Пожалуйста, кто-нибудь предложит лучший подход или поможет мне решить логику этого

Answer 1

setInterval с правильным временем ожидания решить проблему:

loop = () => {
        for (var i = 0; i < urls.length; i++) {
            (function(index) {
                setTimeout(function() {
                    this.setState({ img: urls[index] });
                }, i * 500);
            })(i);
        }
};

svg = e => {
    this.setState({ anim: true, form: true });
     this.loop();
        setInterval(() => this.loop(), 10000);
};

urls.length = 20

Answer 2

setTimeout не блокируется, в основном он планирует лог-вызов на i секунды в будущем, поэтому выводится сообщение "done", потому что все планирование завершено, а не вызов url для печати.

Я не совсем понимаю, что вы хотите сделать, но я думаю, это довольно близко:

const printUrl = j => {
  console.log(urls[j])
  setTimeout(() => printUrl(j + 1), j * 1000)
}
printUrl(1)