setInterval不适用于数组

Question

我正在尝试通过使用数组来简化代码，但是我不知道该怎么做。

到目前为止，我的代码是

var items = ['html5', 'css', 'javascript', 'jquery'];
var itemLoop = function(i) {
if (items[i]) {
    console.log(items[i]);
    setInterval(function(){itemLoop(i+1);}
    , 4000);
    }
}
itemLoop(0);

但这并没有返回我想要的项目，基本上我希望这些项目在console.log()返回，但是要循环执行。 本来我的代码是

setInterval(function() {
    setTimeout(function() {
            console.log("html5");
    }, 5000);
    setTimeout(function() {
            console.log("css");
    }, 10000);
    setTimeout(function() {
            console.log("javascript");
    }, 15000);
    setTimeout(function() {
            console.log("jquery");
    }, 20000);
}, 20000);

但是我想添加的项目不止4个，并且创建多个setTimeout()似乎不是正确的方法或最实用的方法，因此我想将“项目”放入数组中，但我不这样做我认为我做对了。

非常感谢任何帮助，谢谢。

Answer 1

有几种方法可以执行此操作，但是您需要能够通过更改数组或保持整数来捕获状态。

该解决方案使用单个间隔和索引来遍历数组，根据需要打印，然后在数组结束时停止计时器。

 const items = ['html5', 'css', 'javascript', 'jquery']; let i = 0; const interval = setInterval(() => { console.log(items[i]); i += 1; if (i >= items.length) { clearInterval(interval) } }, 4000); 

Answer 2

setTimeout()更加实用，在这种情况下会导致代码更简洁，因为您仅对每个项目执行一项操作。 您只需要增加项目索引的时间*一些倍数即可。 例如（我将4000更改为1000，以使其运行更快）：

 var items = ['html5', 'css', 'javascript', 'jquery']; items.forEach((c,i) => setTimeout(() => console.log(c), i*1000)) 

如果要在第一项之前延迟，只需将i*1000更改为(i+1) * 1000

如果您希望它永久循环运行
现在， setInterval()变得更加有用：

 var items = ['html5', 'css', 'javascript', 'jquery']; let i = 0; let interval = setInterval(() => console.log(items[i++ % items.length]), 1000) // some point in the future call clearInterval(interval) to stop