Javascript递归超时调用答案

【问题标题】：Javascript recursive timeout callJavascript递归超时调用
【发布时间】：2013-06-02 20:36:32
【问题描述】：

这是我尝试编写一个动态的 onmouseout 事件，当鼠标离开 div 时该事件会慢慢改变不透明度。由于某种原因，递归和超时似乎没有工作属性，并且不透明度的更改立即完成。

问题： setTimeout() 不能使用递归有什么原因吗？有没有更好的方法来解决这个问题？

function hide(id)
{
    if (gOpacity > .4) 
    {
        gOpacity -= .1;
        document.getElementById(id).style.opacity = gOpacity;
        setTimeout(hide(id),1000)
    }
    else 
    {
        gOpacity = 1.0
    }
}

【问题讨论】：

Why is the method executed immediately when I use setTimeout?的可能重复
下面的答案显示了修复，但为了增加讨论，setTimeout 递归地工作得很好。 setTimeout 将函数作为它的第一个参数，但是，您传递的是函数调用的结果。 hide(id) 立即调用该函数。去掉 ()，你就没事了。
这个功能本质上是一个长时间的“淡出”。您是否有理由不使用 CSS 过渡？在现代浏览器上，CSS 动画是硬件加速的。

标签： javascript html recursion settimeout

【解决方案1】：

将您的 setTimeout 调用更改为

setTimeout(function() { hide(id); } ,1000)

所以它会在 1s 之后执行，而不是立即执行

【讨论】：

你打败了我 16 秒 :)
有没有办法取消这样的事件，所以如果用户在短时间内多次进入和退出 div 会取消之前的事件调用？
@IntriquedMan 是的。您必须将 setTimeout 存储在某个变量中，var x = setTimeout... 并取消此调用使用 clearTimeout(x) w3schools.com/jsref/met_win_cleartimeout.asp
只是因为我很讨厌，尽量避免使用 w3schools，MDN（例如）要好得多：developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout
@BrunoLM 感谢“clearTimeout()”的帮助。

【解决方案2】：

你试过了吗？

function hide(id)
{
    if (gOpacity > .4) 
    {
        gOpacity -= .1;
        document.getElementById(id).style.opacity = gOpacity;
        setTimeout(function() {
           hide(id);
        },1000)
    }
    else 
    {
        gOpacity = 1.0
    }

}

【讨论】：

【解决方案3】：

我认为当你输入时：

 setTimeout(hide(id),1000);

你真正的意思是：

  setTimeout(hide.bind(this,id),1000);

因为在第一种情况下，调用 setTimeout 时会立即调用该函数 - 它是 setTimeout- 的参数。
在第二种情况下，这将是一个绑定函数。所以是的 this 和 id 被评估，但直到 1000 毫秒过去后才调用该函数。

（这只是一种更快的运行/更快的类型创建函数的方式）。

【讨论】：

【解决方案4】：

all 通过 setTimeout 将您的代码包装在递归函数中

function hide(id)
{
    setTimeout(function() {
        if (gOpacity > .4) 
        {
            gOpacity -= .1;
            document.getElementById(id).style.opacity = gOpacity;   
            hide(id);
        }
        else 
        {
            gOpacity = 1.0
        }
    },1000)
}

【讨论】：

即使您的答案似乎是正确的，请先阅读其他答案以获得类似的答案（如本例所示）。其中一个答案也已被接受（旁边有绿色复选标记）。