循环和setTimeout问题的Javascript

Javascript for loop and setTimeout issue

本文关键字：Javascript 问题 setTimeout 循环      更新时间：2023-09-26

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

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

非常感谢您的帮助。

传递给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)

相关文章：