setTimeout不会等待，即使在等待调用函数时也是如此
[英]setTimeout won't wait, even when waiting to call a function
问题描述
Started learning javascript yesterday at CodeAcademy and decided I could actually write code. 
昨天开始在CodeAcademy学习javascript，并决定实际上可以编写代码。 Just kidding. 开玩笑。 Looked around online, found people with a similar learning curve but none of the answers out there fixed my issue. 在网上四处张望，发现人们的学习曲线相似，但是没有答案能解决我的问题。
In HTML I have 4 divs. 在HTML中，我有4个div。 3 live 600px from the left margin. 3居左边缘600px。 1 lives 400px from the left margin. 1居左边缘400px。
There are also 4 buttons. 还有4个按钮。 When I press a button, I'm trying to get the corresponding div to slide to the left over the course of a second until it is left:400px. 当我按下一个按钮时，我试图使相应的div在一秒钟的过程中向左滑动，直到它离开：400px。
I previously had the divs jumping (not taking little steps that looked like sliding) to the correct location but have since broken the code. 以前，我使div跳到正确的位置（没有采取看起来像滑动的小步骤），但是此后破坏了代码。 It seemed like setTimeout wasn't waiting the prescribed time. 似乎setTimeout没有等待指定的时间。 I did some online research and think that by the time the setTimeout was complete, by margin had already continued to decrease to the final resting place. 我进行了一些在线研究，并认为到setTimeout完成时，我们已经逐渐减少到了最后的休息地。
<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>
Thank you for any insights. 感谢您的任何见解。
3 个解决方案
解决方案1
8 已采纳 2011-12-24 16:54:05
setTimeout(slideIn(xslide), 20);
That invokes the slideIn function immediately. 这将立即调用slideIn函数。 You aren't passing the slideIn function to setTimeout , you're passing the value returned by the slideIn function. 你是不是传递slideIn功能setTimeout ，你传递在返回的值slideIn功能。 You have to pass a function to setTimeout , which means you'd do something like this: 您必须将一个函数传递给setTimeout ，这意味着您需要执行以下操作：
setTimeout(slideIn, 20);
However, this way, you don't get to pass in the parameter. 但是，这样一来，您就不必传递参数。 So you wrap it in an anonymous function like this: 因此，您将其包装在一个匿名函数中，如下所示：
setTimeout(function (){
slideIn(xslide);
}, 20);
You could also give the function a name for debugging purposes like this: 您还可以为该函数命名，以进行调试，如下所示：
setTimeout(function slideTimeout(){
slideIn(xslide);
}, 20);
Basically, if you run typeof on the first parameter of whatever you're passing to setTimeout or setInterval , it should return 'function' . 基本上，如果在要传递给setTimeout或setInterval的任何参数的第一个参数上运行typeof ，它应该返回'function' 。 What you're running will return 'undefined' since you're returning nothing. 您正在运行的内容将返回'undefined'因为您什么也不返回。
解决方案2
3 2011-12-24 16:37:29
将调用放在函数容器中
setTimeout(function() { slideIn(xslide); }, 20);
解决方案3
3 2011-12-24 16:38:16
Your function call within setTimeout is being evaluated immediately. setTimeout中的函数调用将立即进行评估。 You want something like this instead, to return a function that will be executed once the timeout elapses: 您想要这样的事情，返回一个超时后将执行的函数：
setTimeout(function(){slideIn(xslide)}, 20);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.