javascript - 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- 的参数。
在第二种情况下，这将是一个绑定函数。所以是的 this 和 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)
}