1

我append()在setTimeout. 如果我删除 SetTimeout，则会加载所有图像。一旦我把它放在这里，变量似乎超出范围或无效。关于我在这里做错了什么有什么建议吗？

//    thumbs[] is an array with image sources.

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) {

     var im = thumbs[imageIndex];

     setTimeout(function(im){  
         $("#a").append("<img class='images' src='" + im + "' />");
     },1000);

} // end for
4

2 回答 2

6

不要尝试传递im给setTimeout回调。您的匿名函数可以读取im，因为函数可以访问其父范围。如果您尝试像那样通过它，它将无法正常工作。setTimeout将在内部调用回调，而不传递任何参数。您实际上在做的是im在匿名函数内创建一个新的、未定义的局部变量，并阻止从外部范围访问该变量。所以这应该工作：

 var im = thumbs[imageIndex];
 setTimeout(function(){  
     $("#a").append("<img class='images' src='" + im + "' />");
 },1000);

但是，您的代码在循环内，仅在循环内执行此操作是不够的。由于setTimeout调用是异步的，因此它们执行im时将始终是循环 ( thumbs.length) 中的最后一个值。您可以通过创建闭包来避免这种情况。Sushil 的回答就是一个例子，所以我将向您展示另一种风格：

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) {
     var im = thumbs[imageIndex];
     setTimeout(createTimerCallback(im), 1000);

} 

function createTimerCallback(im) {
    return function(){  
         $("#a").append("<img class='images' src='" + im + "' />");
    };
}
于 2012-11-14T18:36:19.980 回答
5

尝试这个。在你的情况im里面setTimeout是undefiend. 

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) {

     var im = thumbs[imageIndex];

     setTimeout(function(im){  
         $("#a").append("<img class='image' src='" + im + "' />");
     },1000, im);

}

IE 不支持传入参数，setTimeout 如果你想让它在所有浏览器上工作，试试这个

   for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) {

         var im = thumbs[imageIndex];
       (function(im){
         setTimeout(function(){  
             $("#a").append("<img class='image' src='" + im + "' />");
         },1000);
 })(im);

    }
于 2012-11-14T18:36:12.047 回答