使用超时在React中无限循环

Question

我确实有此功能可以打印urls数组的值，我想做的第一件事是无限期地运行forloop，第二件事我不明白为什么在do循环之前执行“ 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

请有人提出更好的方法或帮助m解决其背后的逻辑

Answer 1

setTimeout不会阻塞，它基本上在将来安排i秒钟的日志调用，这就是为什么打印“ done”消息的原因，因为所有的调度都已经完成，而不是实际的打印url调用。

我不太了解您要做什么，但是我想这很接近：

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

Answer 2

具有正确超时的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