setTimeout causes return of 32 million instead of x,y coordinate

[Jupiter49]

I'm trying to move pictures around on the screen, with a slight delay
between the first picture and second picture (following onmousemove).
When I add the setTimeout function I must be doing it wrong because
the function that calculates the new coordinates for the picture
returns 32 million and change instead of the coordinate. This causes
the picture to not be able to appear on the display, obviously.

Here's the calling code (snipped for readability) that works without
setTimeout:

*********************************
function moveDucks(xPos, yPos) {

baby1.left = newDuckPos(yPos - 30, xPos - 30)
baby1.top = newDuckPos(xPos + 30, yPos + 30)


}


function newDuckPos(currentPos, duckPos) {

newPos = Math.min(Math.max(currentPos, duckPos+3), duckPos+17)

return(document.getElementById) ? newPos + "px" : newPos

}
****************************************

The above returns the correct "newPos" and everything is hunky dory.
Then I
try to use setTimeout:


****************************************
function moveDucks(xPos, yPos) {

baby1.left = setTimeout("newDuckPos("+yPos+" - 30, "+xPos+" -
30)",500);
clearTimeout;

baby1.top = setTimeout("newDuckPos("+xPos+" + 30, "+yPos+" +
30)",500);
clearTimeout;
}
**************************************

The above causes the newDuckPos to return as 32 million+ instead of
normal corrdinates. I am far too new to Javascript to have a clue. I
did follow the i/o enough to see that the the coordinates have valid
values when they reach newDuckPos (I output them to display to make
sure). Then newDuckPos calculates them and before it sends them back
I intercept them again. Again, the values look good.

Then newDuckPos returns them and they get munged.

Can anybody steer me in the right direction to figure this out?
Thanks.

 

[Janwillem Borleffs]

I'm trying to move pictures around on the screen, with a slight delay
between the first picture and second picture (following onmousemove).
When I add the setTimeout function I must be doing it wrong because
the function that calculates the new coordinates for the picture
returns 32 million and change instead of the coordinate. This causes
the picture to not be able to appear on the display, obviously.

When saying something like:

baby1.top = setTimeout(....);

baby1.top will hold a reference to the setTimeout call instead the new
offset.

Try the following (look at the comments):

function moveDucks(xPos, yPos) {
// The statement +varname ensures that varname isn't treated as a string
// so, when xPos eq 1, xPos + 30 won't become "130"
xPosIncr = +xPos + 30;
yPosIncr = +yPos + 30;
xPosDecr = +xPos - 30;
yPosDecr = +yPos - 30;

setTimeout("baby1.left = newDuckPos("+yPosDecr+", "+xPosDecr+")",500);
setTimeout("baby1.top = newDuckPos("+xPosIncr+", "+yPosIncr+")",500);
}



JW

 

[Dom Leonard]

Janwillem Borleffs wrote:

When saying something like:




baby1.top will hold

the timer id value returned by setTimeout, jah?

dag,
Dom

 

[Janwillem Borleffs]

the timer id value returned by setTimeout, jah?

Which is a reference...

JW

 

[Lasse Reichstein Nielsen]

"Dom Leonard" <[email protected]> schreef in bericht

Which is a reference...

That is a confuzing terminology. In my browsers, the value of
setTimeout("",100) is the number 1 (the first time, next time it is
2). It doesn't refer to anything, in the sense that you can follow
the reference to the target. it is just a number that signifies
something to the internals of the browser.

 

[Janwillem Borleffs]

That is a confuzing terminology. In my browsers, the value of
setTimeout("",100) is the number 1 (the first time, next time it is
2). It doesn't refer to anything, in the sense that you can follow
the reference to the target. it is just a number that signifies
something to the internals of the browser.

Actually, it does, because it's an id from the timeout process. You can
store this id in a variable and use it as an argument in clearTimeout to
kill the specific timeout process.

This is demonstrated on the following page:

http://www.jwscripts.com/playground/settimeout.php


JW

 

[Paul LeBlanc]

JW, thanks so much, this really did the trick. Yes!

Question: Since I'm learning this graphical kind of stuff, and since I
see it's really not explained in any depth in the one book I've got, I
wonder if you could steer me in the right direction for more
documentation of the depth that you provided here.

Thanks again!

 

[Janwillem Borleffs]

Question: Since I'm learning this graphical kind of stuff, and since I
see it's really not explained in any depth in the one book I've got, I
wonder if you could steer me in the right direction for more
documentation of the depth that you provided here.

The best references IMO are from the publisher 'O Reilly.

Example: JavaScript: The Devinitive Guide. Just visit
http://www.oreilly.com/ and search for JavaScript/DHTML for more info.


Regards,
JW

 

[Paul LeBlanc]

Lasse, somehow this thread dropped your post from 9/8/03 that described
several issues, one being the setting of the conditional loop inside the
setTimeout statement. You recommended the following:

setTimeout('x+=1; y-=1; moveDucks('+ x +','+ y +')',500);

For some reason this cause a hang as if there is an infinite loop going
on. Here's where the code is placed:


function seedPos(xaxis, yaxis) {

x=xaxis;
y=yaxis;

do {

setTimeout('x+=1; y-=1; moveDucks('+ x +','+ y +')',500);

//x+=1; y-=1;


setTimeout('moveDucks('+ x +','+ y +')',500);



TextBox4.value=(x +","+y)


} while (x < 400);


}


I posted my page at
http://dotdot.sectorlink.org/html/goducks/goducks auto.htm if you
would be so kind as to refer to it for the full source. I think all I
need is a way to slow down the above do/while loop.

I may need more in the function called "newDuckPos" too but I am not
sure, and wouldn't know how to encapsulate the return in setTimeout.
Thanks for looking at it. ~Paul

 

[Lasse Reichstein Nielsen]

Lasse, somehow this thread dropped your post from 9/8/03 that described
several issues, one being the setting of the conditional loop inside the
setTimeout statement. You recommended the following:

setTimeout('x+=1; y-=1; moveDucks('+ x +','+ y +')',500);

Did I? Damn. I shouldn't have, because that is wrong.

There were two suggestions:
1) move the updating of x and y into the scheduled code, but keep the
variable *names* in the call to moveDucks (which is what 'x+=1;...' does).
2) Keep the updating of x and y in the code that calls setTimeout, and
use the *values* of x and y in the call (which is what '...'+x+'...' does).
The above line combines the two, which will *not* work.

So, either
for (var i=0;i<400;i++) {
x+=1;
y-=1;
setTimeoue('moveDucks('+ x +','+ y +')',50*i);
}
or
for (var i=0;i<400;i++){
setTimeout('x+=1;y-=1;moveDucks(x,y)',50*i);
}

....

I posted my page at
http://dotdot.sectorlink.org/html/goducks/goducks auto.htm if you
would be so kind as to refer to it for the full source. I think all I
need is a way to slow down the above do/while loop.

The do-while loop isn't the problem, it runs as fast as it can.
The problem is that all the setTimeout's have the same delay (500),
so they all happen at (almost) the same time.

In the above, I have picked delays with 50ms intervals. In your code,
you can try changing "500" to "50*x" (since x is already counting from
1 to 400).

I may need more in the function called "newDuckPos" too but I am not
sure, and wouldn't know how to encapsulate the return in setTimeout.

I must admit I am too tired to read that much code right now
So, instead, I'll say how I would do it.

Your solution has a big loop that does the computation and creates all
the timeouts at once. I would put the computation into the scheduled
code, so each timeout triggers one update of coordinates, and one
call to the function that moves the ducks to the new coordinate.


Since you know setTimeout, I'll use that. Otherwise you could use
setInterval as well.

---
var x=100,y=600;

function stepDuck() {
x+=1;
y-=1;
moveDucks(x,y);
if (x<400) {
setTimeout(stepDuck,50);
}
}

function seedPos(xaxis,yaxis) {
x=xaxis;
y=yaxis;
setTimeout(stepDuck,50);
}

 

[Paul LeBlanc]

Thanks Lasse, I finally got it to work. I did take your advice about
using values instead of var names (in certain places.) That eliminated
one class of problem. I also figured out how to call the seedPos
function recursively (with a setTimeout). That totally cleared up the
problem of the moveDucks events firing at once.

Here's what did the trick:


function seedPos(x,y) {

if (x < 710) {


x+=15; y-=15;

moveDucks(x , y);


timer=setTimeout('seedPos('+ x +' ,'+ y ')',500);

}

}

Thanks again for all your help. It was a steep learning curve for this
VB.NET programmer that doesn't know Javascript from Java! ~P