如何将JS数组随机取词改为按循环顺序依次取值

嘿，这事儿超简单！咱们只需要把原来的随机取数逻辑，换成按索引顺序循环遍历的逻辑就行。核心思路是用一个计数器跟踪当前要展示的元素位置，每次定时器触发就推进计数器，到数组末尾后自动回到开头，形成循环。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="random-word"></p>

<script>
var array = ['all', 'some', 'one'];
var words = null;
// 新增计数器，记录当前要取的元素索引，初始为0（对应第一个元素'all'）
var currentIndex = 0;

var getWord = function() {
  // 先获取当前索引对应的元素
  var currentWord = array[currentIndex];
  // 用取模运算简洁实现索引循环：推进后如果超出数组长度，自动重置为0
  currentIndex = (currentIndex + 1) % array.length;
  return [currentWord];
};

setInterval(function() {
  words = getWord();
  $('#random-word').html(words[0]);
}, 150);
</script>

关键修改点说明 #

• 新增currentIndex变量，用来追踪当前要展示的元素在数组中的位置，初始值为0（对应数组第一个元素'all'）
• 重写getWord函数：不再用Math.random()随机取数，而是直接取array[currentIndex]的元素，然后通过(currentIndex + 1) % array.length实现索引循环——当索引加到等于数组长度时，取模运算会让它自动回到0，完美实现all→some→one→all→...的循环效果
• 定时器和DOM更新的原有逻辑保持不变，无需改动

这样修改后，页面就会严格按照你想要的固定顺序循环展示单词啦！

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