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

Question

我在 setTimeout 中使用此 append() 函数时遇到问题。如果我删除 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 + "' />");
    };
}