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;
}

clearTimeout不会停止循环

2 个答案: