459,504 Members | 1,190 Online
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

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

 P: n/a 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. Jul 20 '05 #1
10 Replies

 P: n/a "Jupiter49" schreef in bericht news:c7**************************@posting.google.c om... 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 Jul 20 '05 #2

 P: n/a Janwillem Borleffs wrote: When saying something like:baby1.top = setTimeout(....); baby1.top will hold the timer id value returned by setTimeout, jah? dag, Dom Jul 20 '05 #3

 P: n/a "Dom Leonard" schreef in bericht news:fR*****************@nnrp1.ozemail.com.au... baby1.top will hold the timer id value returned by setTimeout, jah? Which is a reference... JW Jul 20 '05 #4

 P: n/a "Janwillem Borleffs" writes: "Dom Leonard" schreef in bericht news:fR*****************@nnrp1.ozemail.com.au... the timer id value returned by setTimeout, jah? 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. -- Lasse Reichstein Nielsen - lr*@hotpop.com Art D'HTML: 'Faith without judgement merely degrades the spirit divine.' Jul 20 '05 #5

 P: n/a "Lasse Reichstein Nielsen" schreef in bericht news:is**********@hotpop.com... 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 Jul 20 '05 #6

 P: n/a 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! *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it! Jul 20 '05 #7

 P: n/a "Paul LeBlanc" schreef in bericht news:3f***********************@news.frii.net... 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 Jul 20 '05 #8

 P: n/a 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/go...cks%20auto.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 *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it! Jul 20 '05 #9

 P: n/a Paul LeBlanc writes: 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/go...cks%20auto.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); } --- How does that work? /L -- Lasse Reichstein Nielsen - lr*@hotpop.com Art D'HTML: 'Faith without judgement merely degrades the spirit divine.' Jul 20 '05 #10

 P: n/a 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 *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it! Jul 20 '05 #11

### This discussion thread is closed

Replies have been disabled for this discussion.