Javascript for 循环和 setTimeout 问题

Question

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

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 的值会递增？

非常感谢任何帮助。

Answer 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)