CODEWITHSUNDEEP
javascriptfunctionsettimeout
james d.
james d.

Reputation: 3

setTimeout won't wait, even when waiting to call a function

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.

Upvotes: 0

Views: 2551

Answers (3)

Some Guy
Some Guy

Reputation: 16210

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.

Upvotes: 8

ziesemer
ziesemer

Reputation: 28707

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);

Upvotes: 3

ZagNut
ZagNut

Reputation: 1451

put the call in a function container

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

Upvotes: 3

Related Questions