循环中的javascript超时

Question

我学习 JavaScript 是为了好玩，但遇到了一个奇怪的问题。我正在尝试创建自己的淡入功能。但是，我的代码不起作用，它只是以完全不透明的方式显示“内容”div。

setContentOpacity 函数确实有效，我已经对其进行了测试，它非常有效。

理想情况下，我认为应该发生的是 1000 个“setTimeout”调用应该放在“堆栈”上，第一个设置低不透明度且没有超时，第二个设置不透明度稍高且超时时间短，一直到最后一次调用，将不透明度设置为 1000，超时为 3000。

所以基本上，它应该立即将不透明度设置为 0，1 秒内设置为 ~333，2 秒内设置为 ~666，3 秒内设置为 1000。我认为我的逻辑在这里是合理的；设置不透明度的调用应该随着时间的推移以产生淡出效果的方式解决。

下面是相关代码:

<script language='JavaScript' type='text/JavaScript'>

//takes a value from 0-1000
function setContentOpacity(value) {
   document.getElementById('content').style.opacity = value/1000;
   document.getElementById('content').style.filter = 'alpha(opacity=' + value/10 + ')';
}

function fadeInContent(){

setContentOpacity(0);

for (var i=0;i<=1000;i++)
{
   setTimeout(function(){setContentOpacity(i);}, (i*3));
}


}

onload=fadeInContent;

</script>

(注意:我尝试简单地调用 setTimeout(setContentOpacity(i), (i*3));，但它似乎没有用，我使用匿名函数得到的结果稍微好一些)

知道这里出了什么问题吗？提前致谢!

Answer 1

给setTimeout赋值时需要捕获i的值。

试试这个

for (var i=0;i<=1000;i++)
{
   (function(ind) {
       setTimeout(function(){setContentOpacity(ind);}, (ind*3));

   })(i);
}

如您所知，变量的作用域是函数作用域。并且 i 的相同值由 setTimeout 的所有回调共享。所以 i 的值将是 1000 。所以看起来好像没有效果，这是因为变量范围的值将始终是最后一次迭代，因为它由相同的公共(public)范围共享。 .通过将它包含在 Immediately Invoked Function Expression 中，您正在创建一个新函数，其值 i 限定在它的范围内。

Check Fiddle