javascript - 浏览器跳过div的动画

Question

经验丰富的程序员，

我编写了一个简单的函数来为 div 制作动画:

<script>
function okenko(y1, y2, dy) 
{
vyska = document.getElementById("okenko");
y1=y1+dy;

if (y1<=y2) {
  vyska.style.bottom = y1+'px';
  alert(y1);
  setTimeout(okenko(y1, y2, dy),30);
  }
else {
  vyska.style.bottom = y2+'px'
  }
}
</script>

加上触发按钮和div:

<input type="button" onclick="okenko(-60,0,5);" value="Okénko">
<div id="okenko" style="position:fixed;bottom:0px;">

插入alert()后它可以正常工作 - 但如果删除它，动画就会被跳过。有什么问题吗？

谢谢!

Answer 1

这一行:

setTimeout(okenko(y1, y2, dy),30);

...立即调用 okenko(y1, y2, dy)，并传递其返回值(未定义) 到 setTimeout (最终什么也不做)，就像 foo(bar()) 调用 bar 并将其返回值传递给 foo。

您的意思可能是:

setTimeout(function() {
    okenko(y1, y2, dy);
}, 30);