Question

我在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

Answer 1

请勿尝试将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 + "' />");
    };
}

Answer 2

试试这个。在您的情况下，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);

    }

在附加图像的函数中使用setTimeout

2 个答案: