檢查陣列中的所有百分比均表現

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; 

它basicly令狀跨度＃％的新的百分比每500毫秒。
問題是，在進度條達到100％後，再次以0％，5％等等開始。

如何檢查數組rotateExt中的百分比是否全部顯示，然後停止旋轉？

Answer 1

有幾種方法可以整理這些。要回答你的問題，通過分配時間間隔給一個變量開始：

var rotator = null; 
... 
rotator = setInterval(rotateText, 500); 

... 

function rotateText() { 
    ctr++; 
    if(ctr >= rotatingText.length -1) { 
    clearInterval(rotator); 
    } 
    rotatingTextElement.innerHTML = rotatingText[ctr]; 
} 
... 

然後，而不是當它出界的迭代器重置爲0，清除間隔，使得它不再變化值。你將需要添加-1，使其停止rotatingText[length-1]（最後一個元素）上

Answer 2

而是執行此操作：

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

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

rotateText();