Javascript递归超时调用

Question

这是我尝试编写动态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
    }
}

Answer 1

将setTimeout调用更改为

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

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

Answer 2

你试过这个吗？

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

}

Answer 3

当你输入时我瘦了：

 setTimeout(hide(id),1000);

你真正的意思是：

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

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

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

Answer 4

通过setTimeout将所有代码包装在递归函数中

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