javascript - 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