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将代码中的全部包装在递归函数中

＆＃13;

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

＆＃13;

Javascript递归超时调用

4 个答案: