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()并不是正确的方式或最实用的方式所以我想要把＆＃34;项目＆＃34;相反，但我不认为我做得对。

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

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以使其运行得更快）：

＆＃13;

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

＆＃13;

如果您希望第一项之前的延迟只需将i*1000更改为(i+1) * 1000

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

＆＃13;

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

＆＃13;

setInterval不适用于数组

2 个答案: