循环和setTimeout问题的Javascript

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)