javascript - a 内的 setInterval 导致函数失败

Question

我有两个功能

 function getImgStr(imgName){
        thisStr = '<img src="/_shared/img/discovery/200x100/'+imgName+'.jpg">';
        return thisStr;
    }
    function buildIt(imgSrc){
        console.log(imgSrc);
        $('#content').append('<div></div>');
        $('#content div:last').hide()
            .addClass('imgBox')
            .attr('id',imgSrc)
            .html(getImgStr(imgSrc))
            .slideDown(2000);
    }

我有一个正在循环的数组

$(function(){
        for(i=0;i<=imgList.length-1;i++){
                buildIt(imgList[i]);
        }
    });

工作正常，没有任何问题。

但是当我尝试包装时，这是一个 setInterval is barfs

$(function(){
        for(i=0;i<=imgList.length-1;i++){
            var loadIt = setInterval(function(){
                buildIt(imgList[i]);
            },1000);
        }
    });

当 setInterval 存在时，buildIt 中的 console.log 是未定义的，所以我假设间隔以某种方式影响循环，但我不明白我做错了什么。有什么想法吗？

Answer 1

根据您的说明:如果您想每秒一个接一个地加载图像，您可以执行以下操作。您根本不需要循环。

var i = 0;
var id = setInterval(function() {
    if(i === imgList.length) {
        clearInterval(id);
    } else {
        buildIt(imgList[i++]);
    }
}, 1000)

它的作用是将i 的值初始化为0。i 的功能与for 循环中的i 完全相同。它本质上是一个索引。然后，将间隔的值存储在变量 id 中。通过这种方式，您可以维护对间隔的引用，以便在加载图像完成后可以清除它。

最后，在间隔函数内检查 i 是否等于图像列表中图像数量的长度。如果是，我们就知道我们已经完成了所有加载，因此我们清除了间隔。否则，我们为与 i 的当前值相对应的图像调用 buildIt 函数，并递增 i 的值。