1

我正在学习 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));，但它似乎不起作用，使用匿名函数我得到了稍微好一点的结果）

知道这里有什么问题吗？提前致谢！

4

2 回答 2

2

您需要i在分配给 setTimeout 时捕获 的值。

试试这个

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

   })(i);
}

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

检查小提琴

于 2013-08-07T23:13:39.210 回答
0

我认为这里的主要问题是您正在创建 1000 个setTimeout回调。另一种选择，如果你想每 x 秒运行一次，那就是setInterval.

var i = 0;
var refreshIntervalId = window.setInterval(function(){
    setContentOpacity( i * 3 );
    i++;

    if( i > 1000 ) {
        clearInterval( refreshIntervalId );
    }
}, 1000);

它将每秒运行一次（1000 毫秒），每次调用你的 opacity 函数，直到它达到 1000，然后再次关闭。

于 2013-08-07T23:19:48.870 回答