javascript - 每隔一段时间将项目从 JavaScript 数组中逐一输出到 HTML 文本

Question

第一次 JavaScript 尝试。创建了一个我想输出到 HTML 中的#id 元素的单词数组。希望单词按顺序循环，并且在一定时间间隔内一次一个。在 array.length 的末尾，我希望单词停在第二项 [1] 上。

我发现成功使用代码使单词随机循环，但我真的想让它们按顺序循环，并在项目 [1] 处停止。

var arr = new Array ("dog.", "owner.", "partner.", "community.", "park.", "baby.", "neighbor.", "friend.", "family.", "vet.", "grandparent.", "party.");

var i = 0;

function nextItem() {
  i = i + 1;
  i = i % arr.length;
  return arr[0];  
}

window.addEventListener('load', function () {
  document.getElementById('rotate').textContent = arr[0];
});

setInterval(nextItem, 500);

我希望代码循环遍历项目，但我只看到项目 [1] 闪烁，然后项目 [0] 出现并停留。

Answer 1

首先，您应该将对 setInterval 的调用分配给一个变量 - 这样您就可以在遍历数组后立即停止间隔。在 nextItem 函数中，您可以决定如果 i 变量的增量超过数组的大小会发生什么。如果确实将其设置为 1 并清除间隔。

这是一个例子:

var arr = new Array("dog.", "owner.", "partner.", "community.", "park.", "baby.", "neighbor.", "friend.", "family.", "vet.", "grandparent.", "party.");

var i = 0;
var interval;

function nextItem() {
  if (i + 1 < arr.length) {
    i += 1;
  } else {
    i = 1;
    clearInterval(interval);
  }
  document.getElementById('rotate').textContent = arr[i];
}

interval = setInterval(nextItem, 500);
document.getElementById('rotate').textContent = arr[i];

<p id="rotate"></p>