即使等待调用函数，setTimeout也不会等待(setTimeout won't wait, even when waiting to call a function)

昨天开始在CodeAcademy学习javascript，并决定我实际上可以编写代码。开玩笑。在网上看了一下，找到了类似学习曲线的人，但没有一个答案解决了我的问题。

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

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

我以前有div跳跃（没有采取看起来像滑动的小步骤）到正确的位置，但从那以后打破了代码。似乎setTimeout没有等待规定的时间。我做了一些在线研究，并认为当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>

感谢您的任何见解。

Started learning javascript yesterday at CodeAcademy and decided I could actually write code. 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. 3 live 600px from the left margin. 1 lives 400px from the left margin.

There are also 4 buttons. 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.

I previously had the divs jumping (not taking little steps that looked like sliding) to the correct location but have since broken the code. It seemed like setTimeout wasn't waiting the prescribed time. 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.

<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.

最满意答案

setTimeout(slideIn(xslide), 20);

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

setTimeout(slideIn, 20);

但是，通过这种方式，您无法传递参数。所以你把它包装在这样的匿名函数中：

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

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

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

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

setTimeout(slideIn(xslide), 20);

That invokes the slideIn function immediately. You aren't passing the slideIn function to setTimeout, you're passing the value returned by the slideIn function. You have to pass a function to setTimeout, which means you'd do something like this:

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'. What you're running will return 'undefined' since you're returning nothing.

更多推荐