setTimeout won't wait, even when waiting to call a function
Question
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.
3 answers
solution1
8 ACCPTED 2011-12-24 16:54:05
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.
solution2
3 2011-12-24 16:37:29
将调用放在函数容器中
setTimeout(function() { slideIn(xslide); }, 20);
solution3
3 2011-12-24 16:38:16
Your function call within setTimeout is being evaluated immediately. You want something like this instead, to return a function that will be executed once the timeout elapses:
setTimeout(function(){slideIn(xslide)}, 20);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.