Question

我确实具有打印urls数组值的功能，我要做的第一件事是无限期地运行forloop，第二件事我不明白为什么在执行完“ done”控制台日志之前for循环：

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秒内，这就是为什么打印“完成”消息的原因，因为所有的安排都已经完成，而不是实际的打印网址调用。

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

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

使用超时在React中无限循环

2 个答案: