0

我有两个功能

 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 是未定义的，所以我假设间隔会以某种方式影响循环，但我不明白我做错了什么。有任何想法吗？

4

3 回答 3

2

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

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等于图像列表中图像数量的长度。如果是，我们知道我们已经完成了所有的加载，所以我们清除了间隔。否则，我们调用与buildIt的当前值相对应的图像的函数i并增加 的值i。

于 2012-09-13T21:29:56.767 回答
1

用小提琴更新

   this.buildIt= function(imgSrc){
    console.log("test"+imgSrc)
    console.log(imgSrc.length)
        };

$(function(){ 
      var imgList=[
"test1","test2","test3","test4"
]
        for(i=0;i<=imgList.length;i++){

            var loadIt = setInterval(function(){
                this.buildIt(imgList);
            },1000,imgList);
        }
    });​
于 2012-09-13T21:20:20.727 回答
0

更新：我仍然不完全清楚 OP 正在尝试做什么，但根据我的理解，我将通过堆上的另一个解决方案。您有 N 个图像，并且您希望每秒按顺序更新这些图像。为此，您必须将 asetTimeout与 a结合起来setInterval。将setTimeout错开图像的更新，并且setInterval将导致每个图像依次更新。下面是它的外观：

function start() {
    var nImages = 5;
    for( i=0; i<nImages; i++ ) {
        (function(j){
            setTimeout( function() {
                buildIt(j);
                intervals.push(
                    setInterval( function() {
                        buildIt(j);
                    }, 1000*nImages )
                );
            }, j*1000 );
        })(i);
    }
}

function stop() {
    for( i in intervals ) {
        clearInterval( intervals[i] );
    }
}

这是一个 jsFiddle 演示：http: //jsfiddle.net/FtCCs/

这是我之前的回答： Vivin 是在正确的轨道上，但他的解决方案也行不通，因为它只是将闭包问题推到了堆栈的下方。但是，他在一方面是正确的：您的buildIt函数调用没有获得您期望的索引，而是所有相同的索引。你需要做的是：

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

为了完全清楚发生了什么，请考虑以下示例：

HTML：

<div id="wrong1">Wrong:<br /></div>
<div id="wrong2">Wrong:<br /></div>
<div id="wrong3">Wrong:<br /></div>
<div id="right">Right:<br /></div>

jQuery：

// won't work:
for(var i=0;i<5;i++) {
    setTimeout( function() { $('#wrong1').append(i+'<br />'); }, 500 );
}

// won't work:
for(var i=0;i<5;i++) {
    var j = i;
    setTimeout( function() { $('#wrong2').append(j+'<br />'); }, 500 );
}

// won't work:
for(var i=0;i<5;i++) {
    setTimeout( function() { (function(j){ $('#wrong3').append(j+'<br />'); })(i) }, 500 );
}

// works!
for(var i=0;i<5;i++) {
    (function(j){
        setTimeout( function() { $('#right').append(j+'<br />'); }, 500 );
    })(i);
}

我在这里设置了一个 JsFiddle 来演示：http: //jsfiddle.net/k3RJL/1/

在所有“错误”的示例中，变量iorj是一个闭包，但是当setTimeout执行中的函数时，该值已更改为该闭包中的最终值，因此它们都相同。注意 的区别wrong2：它查看的j是在循环中定义的变量for，所以它永远不会收到 的最终值i，这就是它停在 4 的原因。

​</p>

于 2012-09-13T22:18:52.497 回答