setTimeout 不会等待，即使在等待调用函数时答案

【问题标题】：setTimeout won't wait, even when waiting to call a functionsetTimeout 不会等待，即使在等待调用函数时
【发布时间】：2011-12-24 16:33:01
【问题描述】：

昨天在 CodeAcademy 开始学习 javascript，并决定我可以真正编写代码。只是在开玩笑。在网上环顾四周，发现学习曲线相似的人，但没有一个答案能解决我的问题。

在 HTML 中，我有 4 个 div。 3 从左边距活 600px。 1 距离左边距 400px。

还有 4 个按钮。当我按下一个按钮时，我试图让相应的 div 在一秒钟内向左滑动，直到它离开：400px。

我之前让 div 跳转（不采取看起来像滑动的小步骤）到正确的位置，但后来破坏了代码。似乎 setTimeout 没有等待规定的时间。我做了一些在线研究，认为到 setTimeout 完成时，margin 已经继续减少到最后的休息地。

<html>
<head><title></title>

<script type="text/javascript" language="javascript">
//<![CDATA[

var stopPositionVisible = 400;
var stopPositionHiding = 200;


function slideIn(xslide){
    slidingDivInNow = document.getElementById(xslide);

    if (parseInt(slidingDivInNow.style.left) > stopPositionVisible ) {
        slidingDivInNow.style.left = parseInt(slidingDivInNow.style.left) - 2 + "px";
        console.log(slidinDivInNow.style.left);
    }

    setTimeout(slideIn(xslide), 20);
}


//]]>
</script>
</head>
<body>

<a id="div0link" href="#" onclick="slideIn('d1');">Home</a>
<a id="div1link" href="#" onclick="slideIn('d2');">page1</a>
<a id="div2link" href="#" onclick="slideIn('d3'); ">page2</a>
<a id="div3link" href="#" onclick="slideIn('d4'); ">page3</a>

<div id="d1" style="position:absolute; left:400px; top:50px; background:black; color:white; width:200px">horizontally sliding div</div>
<div id="d2" style="position:absolute; left:600px; top:60px; background:blue; color:white; width:200px">horizontally sliding div</div>
<div id="d3" style="position:absolute; left:600px; top:70px; background:red; color:white; width:200px">horizontally sliding div</div>
<div id="d4" style="position:absolute; left:600px; top:80px; background:green; color:white; width:200px">horizontally sliding div</div>

</body>
</html>

感谢您提供任何见解。

【问题讨论】：

20 毫秒几乎没有时间。不确定您所说的“保证金已经继续下降”是什么意思；该边距不会自行滑动，您要告诉它何时以及如何滑动。
jsfiddle.net/mjaric/xRzXk
谢谢@mjaric - 这是我最喜欢的新网站

标签： javascript function settimeout

【解决方案1】：

setTimeout(slideIn(xslide), 20);

这会立即调用slideIn 函数。您没有将slideIn 函数传递给setTimeout，而是将slideIn 函数返回的值传递给slideIn。你必须将一个函数传递给setTimeout，这意味着你会做这样的事情：

setTimeout(slideIn, 20);

但是，这样一来，您就无法传入参数。所以你把它包装在一个像这样的匿名函数中：

setTimeout(function (){
    slideIn(xslide);
}, 20);

您还可以为函数命名以进行调试，如下所示：

setTimeout(function slideTimeout(){
    slideIn(xslide);
}, 20);

基本上，如果您在传递给setTimeout 或setInterval 的任何内容的第一个参数上运行typeof，它应该返回'function'。您正在运行的内容将返回 'undefined'，因为您没有返回任何内容。

【讨论】：

【解决方案2】：

将调用放入函数容器中

setTimeout(function() { slideIn(xslide); }, 20);

【讨论】：

谢谢@ziesemer - 你们都给出了我在网上看到的最佳实践的答案。当我按照建议执行时，我没有看到任何成功。 slideIn 函数似乎没有再次调用自己，或者它没有将 xslide 变量传回给自己。
您的脚本在:console.log(slidinDivInNow.style.left); 失败，将拼写更正为slidingDivInNow，它在Chrome 中可以正常工作。你可能想放一个if (console !== 'undefined') { console.log(...); } 或其他东西，这样你就可以在 IE 等中测试你的代码......

【解决方案3】：

您在 setTimeout 中的函数调用将立即被评估。相反，您想要这样的东西，以返回一个将在超时过去后执行的函数：

setTimeout(function(){slideIn(xslide)}, 20);

【讨论】：