clearTimeout不會停止循環

Question

我的劇本：

var pics = [ "mads.jpeg" ,"niggs.jpg", "rits.jpeg"];

var totalPics = pics.length;    
var frame = document.getElementById("photos");    
var i = 0;   

function loop() {

    if(i > (totalPics - 1)){                   
        clearTimeout(loopTimer);        
    }

    frame.innerHTML = '<img id="i" class="image" src="real_bs/'+pics[i]+'" />';
    i++;

    loopTimer = setTimeout(loop, 300);

}

loop();

當i超過totalPics - 1 ，循環不會停止，而是會顯示一個小的未定義圖像。 為什么clearTimeout(loopTimer)沒有停止它？ 這是可變范圍的問題嗎？

Answer 1

您甚至不需要調用clearTimeout僅安排在剩下更多迭代時才調用setTimeout 。 從未開始的超時不必清除：

(function loop() {

    frame.innerHTML = '<img id="i" class="image" src="real_bs/' + pics[i] + '" />';

    if (++i < totalPics) {
        setTimeout(loop, 300);
    }

})();  // invoke immediately

Answer 2

只需在clearTimeout方法調用之后添加簡單的返回即可。 像這樣

if(i > (totalPics - 1)){                   
    clearTimeout(loopTimer);
    return;
}