JS：如何重置for循環中的索引，使其再次循環，沒有很多超時錯誤？

Question

我正在處理一個自定義的JS縮略圖更換器，它的工作原理。我希望它無限循環縮略圖。目前它一直持續到i==thumbs然後停止。這裏是codesnipped：

for (var i = 1; i <= thumbs; i++) { 
    timer[i] = setTimeout("Thumbchange('" + image_id + url + i + '.jpg' + "')", i * 100 * 10); 
} 

我想，如果i達到thumbs（最後一個縮略圖），復位i爲1，再次播放for循環。但我無法讓它工作。

我嘗試了很多東西，包括以下內容，但由於超時而導致瀏覽器崩潰：我能以某種方式徹底解決超時問題嗎？

for (var i = 1; i <= thumbs; i++) { 
    timer[i] = setTimeout("Thumbchange('" + image_id + url + i + '.jpg' + "')", i * 100 * 10); 

    if (i == thumbs) { 
     i = 1; 
     clearTimeout(timer[i]); 
     continue; 
    } 
} 

Answer 1

或者使用setInterval，它將自動永久循環或直到您清除它。 請注意，在setInterval和setTimeout中，您應該使用不是評估字符串的函數。

var img = 0; 

Thumbchange (image_id + url + img + '.jpg'); // Initialise img 0 
window.setInterval (function() { // Invoked once per interval 
    if (++img == thumbs) // inc image and reset to 0 when it reaches thumbs 
    img = 0; 
    Thumbchange (image_id + url + img + '.jpg'); // do image change 
}, 1000); // 1 second per image 

Answer 2

while (i<=thumbs) { 

    // do stuff before i increments 

    if(i===thumbs) { 
     i = 0; 
    } else { 
     i++; 
    } 

    // do stuff after i was 
    // incremented 

} 

但要記住，這樣的寫法將永遠運行，因此具有大性能影響的循環。

Answer 3

請記住，i永遠不會達到>thumb的值，因爲這是您的循環的終止條件。

你的問題是，在這種情況下：

if (i>thumbs) 

將其更改爲：

if(i == thumbs) 

現在你的代碼看起來應該是這樣：

for (var i=1; i<=thumbs; i++) { 
    timer[i] = setTimeout("Thumbchange('" + image_id + url + i + '.jpg' + "')", i*100*10); 
    if (i==thumbs) { 
     i=1; 
     clearTimeout(timer[i]); 
     continue; 
     } 
    } 

Answer 4

使用setTimeout在一個無限循環是一種不好的做法，因爲最終會在一段時間內創建數千次超時。 這就是爲什麼你的瀏覽器崩潰。在（比方說）5秒你最終創建（比方說）10000超時，並且瀏覽器跟不上，並因此崩潰，因爲你消耗太多的內存。

在最後一個被觸發後創建一個新的超時會更好。

var i = 1; 
var changeAfterTimeout = function() { 
    i++; 
    // check if we have finished the thumbnails. If so, start over 
    if (i == thumbs) { 
     i = 1; 
    } 
    Thumbchange(image_id + url + i + ".jpg"); 
    // call again after 5 seconds 
    setTimeout(changeAfterTimeout, 5000); 
} 
changeAfterTimeout(); 

通過這種方式，在任何給定的時間，我們有只是一個超時運行。