setInterval遍历数组失效求助：如何实现数组元素循环输出？

我来帮你捋捋问题所在，以及怎么用数组实现你想要的循环输出效果～

首先你的原代码之所以不符合预期，核心问题出在错误搭配了递归和setInterval：

• 每次调用itemLoop时，只要数组对应位置有元素，就会新建一个setInterval定时器；
• 这会导致后续越来越多的定时器同时运行，最终输出频率完全失控，根本不是你想要的逐个间隔输出效果。

下面给你两种符合需求的实现方式：

方案1：单次遍历数组（逐个间隔输出，结束即停止） #

如果只是想把数组元素按顺序、每4秒输出一个，直到最后一个元素为止，可以把setInterval换成setTimeout——因为setTimeout只会执行一次，不会重复创建多余的定时器：

var items = ['html5', 'css', 'javascript', 'jquery'];
var itemLoop = function(i) {
  if (items[i]) {
    console.log(items[i]);
    // 只在当前输出完成后，延迟4秒调用下一次遍历
    setTimeout(function(){itemLoop(i+1);}, 4000);
  }
}
itemLoop(0);

方案2：无限循环输出数组（输出完最后一个回到第一个继续） #

如果需要循环往复地输出数组元素（比如输出完jquery后，再回到html5继续间隔输出），用单个setInterval来控制逻辑会更清晰：

var items = ['html5', 'css', 'javascript', 'jquery'];
var currentIndex = 0;

// 单个定时器持续运行，每次输出当前元素后更新索引
var loopTimer = setInterval(function() {
  console.log(items[currentIndex]);
  // 索引自增，超过数组长度时重置为0，实现循环
  currentIndex = (currentIndex + 1) % items.length;
}, 4000);

// 后续如果需要停止循环，执行这行代码即可：
// clearInterval(loopTimer);

简单总结下原代码的问题：你原本想通过递归逐个输出，但setInterval是重复执行指定函数，每调用一次就会新增一个持续运行的定时器，到后面多个定时器同时触发，自然就乱套了。换成setTimeout（单次执行）或者用单个setInterval控制索引，就能完美解决问题啦～

内容的提问来源于stack exchange，提问作者ddr45