www.webdeveloper.com
Results 1 to 8 of 8

Thread: setTimeout issue

  1. #1
    Join Date
    Aug 2006
    Posts
    301

    Question setTimeout issue

    hi guys, this always trips me up.

    i'm running out of memmory at line 23, or the function
    executes only once, (even if i call it several times), so
    there isprobably a bug in the function causing the script
    to halt.

    javascript was the first language i learned years back,
    and i've been coding php mostly since, so i might have
    the wrong syntax.

    all i'm trying to do is call goLeft(), and have it call itself
    several times using setTimeOut() until the variable left is
    no longer less than 50. which should animate the box
    by moving it to the right 5px every 500milliseconds.

    it's probably a very simple fix but i just can't recall.

    help me out please.

    lol, i know i can use jquery animate, but i'm doing a
    live javascript course and learning to manually manipulate
    the dom without using jquery.

    it worked fine before encapsulating the code into a function
    and just using setInterval(), so i dunno what went wrong.

    thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Accessing-Dom-Nodes</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    <body>
    	<div id="wrapper600">
    		<h1>DOM Scripting - Javascript and CSS not jQuery</h1>
    		<div id="leftPos">0</div>
    		<div id="box" style="position:relative;border:1px dashed orange;width:50px;height:50px;"></div>
    	</div>	
    <script type="text/javascript">
    var leftPos = document.getElementById("leftPos");
    var box = document.getElementById("box");
    
    function goLeft(){
    left = 0;
    	if( left < 50 ){
    	left += 5;
    	leftPos.innerHTML=left;
    	box.style.left=left+'px';
    	setTimeOut(goLeft(),500);
    	}
    }
    goLeft();
    </script>	
    </body>
    </html>

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Code:
    setTimeOut(goLeft(),500);
    That calls the function recursively.
    Code:
    setTimeOut("goLeft()",500);
    or preferably
    Code:
    setTimeOut(goLeft, 500);

  3. #3
    Join Date
    Aug 2006
    Posts
    301

    no luck

    Quote Originally Posted by Sterling Isfine View Post
    That calls the function recursively.
    Code:
    setTimeOut("goLeft()",500);
    or preferably
    Code:
    setTimeOut(goLeft, 500);
    i modified it to this but still getting 'out of memory at line:23'.

    should i call the function from within itself, or just in the body
    of the page? or should i just call setTimeOut(goLeft(),500) once
    outside of the function?

    it should call itself recursively a couple times as it makes the
    box move across the screen every half second.

    i'm either getting the memory error or it only calls itself once
    and terminates. i understand what your hinting at, but not
    sure how to code it to work, can you adjust my code so
    i can see what i'm still doing wrong?

    thanks for helping

    Code:
    <script type="text/javascript">
    var leftPos = document.getElementById("leftPos");
    var box = document.getElementById("box");
    
    function goLeft(){
    left = 0;
    	if( left < 50 ){
    	left += 5;
    	leftPos.innerHTML=left;
    	box.style.left=left+'px';
    	setTimeOut(goLeft(),500);
    	}
    }
    setTimeOut(goLeft(),500);
    </script>

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    setTimeout was in the wrong case and 'left' cannot be within the function.

    There are better ways of doing this.

  5. #5
    Join Date
    Aug 2006
    Posts
    301

    ha, that did it

    Quote Originally Posted by Sterling Isfine View Post
    setTimeout was in the wrong case and 'left' cannot be within the function.

    There are better ways of doing this.
    i know, i know, we have jquery now, but i like to learn the nuts and bolts, i modified and it works now.

    thanks a bunch.

    working code:

    note: i pulled out the 'time' var and renamed it 'interval'

    Code:
    <script type="text/javascript">
    var leftPos = document.getElementById("leftPos");
    var box = document.getElementById("box");
    var left = 0;
    var interval = 150;
    function goLeft(){
    	if( left < 50 ){
    	left += 5;
    	leftPos.innerHTML=left;
    	box.style.left=left;//+'px';
    	setTimeout("goLeft()",interval);
    	}
    }
    goLeft();
    </script>

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    it is really strange to hear that this code works while you have this line

    box.style.left=left;//+'px';

    in it

  7. #7
    Join Date
    Aug 2006
    Posts
    301

    lol

    Quote Originally Posted by Padonak View Post
    it is really strange to hear that this code works while you have this line

    box.style.left=left;//+'px';

    in it
    lol it works with or without it, but then again i'm only using IE at the moment, i actually expected it only to work when i the script adds the pixels, but it works without it at least in IE, i'll remove the comment so it will be proper i just kinda forgot since it was working, lol.

    i'd normally just use jquery animate() but i'm learning event handling and dom scripting via a live course at the moment so i'm avoiding jquery in order to learn the manual way.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    these two letters - IE - always remind me the famous phrase "memento mori" ;-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles