Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Slowing down a loop

    I've written some code to execute a loop. It's all standard stuff using a for loop but the problem I have is that it is executed too quickly.

    Between each iteration of the loop I want to insert a "pause" of, say, 40 or 50 milliseconds. I initially tried the setTimeout() function but I soon found out that wasn't right for use within a loop. What I want to achieve could be summed up as follows:-

    for (i = 1; i <= 100; i++)
    {
    dosomecode();
    wait(50);
    }

    I've spent some time looking into this but couldn't get anything to work. If you haven't already guessed, I'm quite new to Javascript and any help would be appreciated.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    If I understand correctly, you can simulate a loop and call a setInterval from outside it:
    Code:
    <html>
    <head>
    </head>
    
    <body>
    <div id="thediv"></div>
    <script>
    var i=0;
    function run(){
    document.getElementById("thediv").innerHTML=++i;
    if(i==100){clearInterval(int)}
    }
    int=setInterval(run,50)
    </script>
    </body>
    </html>
    Last edited by xelawho; 01-06-2012 at 05:40 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    You can use a function to contain and increment a counter property:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset= "utf-8">
    <title>Count slow</title>

    <script type="text/javascript">
    Code:
    function time1(){
    	//set the counter as a property of the function
    	if(!time1.count) time1.count= 0;
    	//check and increment the counter before running code
    	if(time1.count++<100){
    		document.getElementById('counter').innerHTML+=time1.count+' ';	
    		setTimeout(time1, 150);
    	}
    	else delete time1.count;
    }
    window.onload=time1;
    </script>
    </head>

    <body>
    <h1>Count: <span id="counter"># </span></h1>
    </body>
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Unlike some other languages, Javascript does not have a sleep or wait function.

    Code:
    <div id = "numbers"></div>
    
    <script type = "text/javascript">
    
    var i = 1;
    var result = "";
    
    function writenumbers() {
    result +=  i + "<br>";
    document.getElementById("numbers").innerHTML = result;
    i++;
    if (i <= 10) {
    setTimeout(writenumbers,1000);
    }
    }
    
    writenumbers();
    
    </script>
    Or you can use setInterval() as xelawho has shown.
    Last edited by Philip M; 01-06-2012 at 06:23 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for all your replies!

    The one I chose to work with was offered by Phillip M and this because I could understand it better than others. (I told you I was new to this!) It does, of course, work perfectly.

    Unfortunately, I can't get the code to do what I want which is this... ...

    I want to position an image in a div and then, say 40 milliseconds later, make the image a bit bigger and position it again. If I repeat this process until the image is at full size (ie as big as the last specified size in the loop) then it will give illusion that the image has "grown". It is, I suppose, a simple kind of "transition".

    However, no matter what I do the image is always rendered at full size straightaway. It seems like the browser is ignoring the setTimeout altogether.

    The code I've used is below:-

    <script type = "text/javascript">
    iheight = 0;
    function zoomphoto(picture)
    {
    var s1 = "<img src = ";
    var s2 = picture;
    var s3 = " height = ";
    var s5 = "width = ";
    var s7= "/>";

    markup = s1 + s2 +s3 + iheight +s5 + s7;
    document.getElementById('photos').innerHTML = markup;

    iheight++;
    if (iheight <=120){
    setTimeout(zoomphoto(picture), 1000);
    }
    }
    </script>

    Again, any help would be greatly appreciated and I'm sorry if my problem is trivial for more experienced coders!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    interesting script. From what I understand you shouldn't pass variables within a setTimeout call, but you can define them elsewhere, like this:

    Code:
    <html>
    <head>
    
    </head>
    <body>
    <div id="photos"></div>
    <script type = "text/javascript">
    iheight = 0;
    
    var picture="pic.jpg"
    
    zoomphoto()
    
    function zoomphoto(){
    var s1 = "<img src = ";
    var s2 = picture;
    var s3 = " height = ";
    var s5 = "width = ";
    var s7= "/>";
    
    markup = s1 + s2 +s3 + iheight +s5 + s7;
    document.getElementById('photos').innerHTML = markup;
    
    iheight++;
    if (iheight <=120){
    setTimeout(zoomphoto, 1000);
    }
    }
    </script>
    </body>
    </html>
    if you really want to do it your way, wrap the function call in the Timneout in quotes:

    Code:
    <html>
    <head>
    
    </head>
    <body>
    <div id="photos"></div>
    <script type = "text/javascript">
    iheight = 0;
    
    var picture="pic.jpg"
    
    zoomphoto(picture);
    
    function zoomphoto(picture)
    {
    
    var s1 = "<img src = ";
    var s2 = picture;
    var s3 = " height = ";
    var s5 = "width = ";
    var s7= "/>";
    
    markup = s1 + s2 +s3 + iheight +s5 + s7;
    document.getElementById('photos').innerHTML = markup;
    
    iheight++;
    if (iheight <=120){
    setTimeout('zoomphoto(picture)', 1000);
    }
    }
    </script>
    </body>
    </html>

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    oops. sorry, just noticed that you want it to start with a defined size, then grow. that's actually simpler:

    Code:
    <html>
    <head>
    
    </head>
    <body>
    <img id="pic" src="mypic.jpg" height="40px" width="40px"/>
    <script type = "text/javascript">
    
    var picture="pic"
    
    zoomphoto()
    
    function zoomphoto() {
    thepic=document.getElementById(picture)
    thepic.height+=1;
    thepic.width+=1;
    if (thepic.height <=120){
    setTimeout(zoomphoto, 1000);
    }
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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