数组结束时停止文本旋转器超时

Question

我的代码运行良好，但它永远不会结束。如何在

Word6

之后停止旋转器？我又尝试了一种

setTimeout

，但不起作用。

const phrases = ['Word1', 'Word2', 'Word3', 'Word4', 'Word5', 'Word6'];
let index = 0;

function rotate() {
  document.getElementById('text-rotator').innerText = phrases[index];
  index = (index + 1) % phrases.length;
  setTimeout(rotate, 700);
}

rotate();

<span id="text-rotator"></span>

Answer 1

要在数组末尾停止更新，请在

index

函数中递增

rotate()

并检查它是否仍在数组的边界内。只有当它是时，你才应该再次调用

rotate()

。

const phrases = ['Word1', 'Word2', 'Word3', 'Word4', 'Word5', 'Word6'];
let index = 0;

function rotate() {
  document.getElementById('text-rotator').innerText = phrases[index];
  if (++index < phrases.length)
    setTimeout(rotate, 700);
}

rotate();

<span id="text-rotator"></span>