javascript - 检查是否显示了数组中的所有百分比

Question

我正在使用此代码在我的进度条中显示当前进度:

var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("percent");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "5%";
rotatingText[2] = "10%";
rotatingText[3] = "15%";
rotatingText[4] = "20%";
rotatingText[5] = "25%";
rotatingText[6] = "30%";
rotatingText[7] = "35%";
rotatingText[8] = "40%";
rotatingText[9] = "45%";
rotatingText[10] = "50%";
rotatingText[11] = "55%";
rotatingText[12] = "60%";
rotatingText[13] = "65%";
rotatingText[14] = "70%";
rotatingText[15] = "75%";
rotatingText[16] = "80%";
rotatingText[17] = "85%";
rotatingText[18] = "90%";
rotatingText[19] = "95%";
rotatingText[20] = "100%";
setInterval(rotateText, 500);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;

它基本上每 500 毫秒在 span#percent 中写入一个新的百分比。
问题是进度条达到 100% 后，它会再次从 0%、5% 等开始。

如何检查数组 rotatingText 直到 [20] 中的百分比是否全部显示然后停止旋转？

Answer 1

改为这样做:

var rotatingTextElement = document.getElementById("percent");
var ctr = 0;

function rotateText() {
  rotatingTextElement.innerHTML = ctr + "%";
  ctr += 5;
  if (ctr <= 100) {
    window.setTimeout(rotateText, 500);
  }
}

rotateText();