Javascript for loop 和 setTimeout 问题答案

【问题标题】：Javascript for loop and setTimeout issueJavascript for loop 和 setTimeout 问题
【发布时间】：2011-06-21 15:40:57
【问题描述】：

所以我认为下面的代码会很简单，但却变得很头疼。它应该是一个循环，将改变和对象的不透明度，使其消失。

function doSomething()
{
    var i = 10;
    for(i = 10; i >=0; i = i - 1)
    {
        setTimeout("setOpacity('t1',"+ i +")", 100*i);
        WRITE 1
    }
}

function setOpacity(elem, hmm)
{
    WRITE 2
    document.getElementById(elem).style.opacity = (10 - hmm)/10;
    document.getElementById(elem).style.filter = 'alpha(opacity=' + (10 - hmm)*10 + ')';
}

所以问题在于 for 循环从 10 倒计时到 0，这已通过位于 WRITE 1 的打印语句确认。但是在 setOpacity 方法中，接收到的数字从 0 开始计数到 10 和这已在 WRITE 2 的打印声明中得到证实。

我想知道为什么会发生这种情况以及如何解决它。我相信这与在循环结束后执行方法调用的 setTimeout 调用有关，但如果是这样，那么为什么传递给 setOpacity 的值会递增？

非常感谢任何帮助。

【问题讨论】：

我不明白问题出在哪里，它正在按应有的方式工作。如果它首先执行 10 - 0，那将在元素中淡入。
啊，是的，由于我实施的工作，它现在正在工作。如果您查看 setOpacity 函数，我会从 10 中减去 hmm，这样数字就是我想要的值。但这并不能改变数字没有正确传递的事实。解决方法为我提供了正确的功能，但我有兴趣在没有解决方法的情况下实现此代码。
帮自己一个忙 - 使用 jQuery - 它有 fadeIn()/fadeOut() - 还有无数其他有用的东西
这是因为 setOpacity('t1', 0); 与 setOpacity('t1', 10); 相比首先超时 @mkilmanas 也许他们想学习如何自己做。
实际上我工作的公司还没有在他们的系统上标准化jQuery，所以我不能使用它。相信我，尽管我绝对喜欢使用它。

标签： javascript loops for-loop settimeout

【解决方案1】：

传递给 setOpacity 的值正在增加，因为您传递了不同的超时。循环的结果基本上如下：

setTimeout("setOpacity('t1', '10')", 1000)
setTimeout("setOpacity('t1', '9')", 900)
setTimeout("setOpacity('t1', '8')", 800)
....
setTimeout("setOpacity('t1', '0')", 0)

结果是它们根据时间以相反的顺序被调用。所以最后一次调用会在 0ms 内执行（函数完成后），导致 0 为 hmm，然后是 1、2、3 ...

要解决此问题，您需要将 100*i 更改为 100 * (10 - i)

【讨论】：

是的，就是这样，你和凯尔都有正确的答案。感谢您的帮助