www.webdeveloper.com
Results 1 to 3 of 3

Thread: setTimeout vs setInterval

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    setTimeout vs setInterval

    this sliding animation works just fine with setInterval but doesn't work with setTimeout though i used setTimeout inside the function "scroll" so that it loops the function every time its been encountered
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    #container{
    	width:620px;
    	height:100px;
    	border:1px solid red;
    	overflow:hidden;
    	position:relative;
    }
    #div1{
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:620px;
    	height:100px;
    	padding:1px;
    }
    #div2{
    	position:absolute;
    	left:620px;
    	width:620px;
    	height:100px;
    	padding:1px;
    	top:0px;
    }
     img{
    	width:206px;
    	height:100px;
    	float:left;
    }
    
    </style>
    
    
    </head>
    
    <body>
    <div id="container">
    <div id="div1"><img src="image1.jpg" ><img src="image2.jpg"><img src="image3.jpg"></div>
    <div id="div2"><img src="image4.jpg" ><img src="image5.jpg"><img src="image6.jpg"></div>
    </div>
    <script>scroll();</script>
    <script>
    var m=0;
    var n=620;
    function scroll(){
    	document.getElementById("div1").style.left =m +"px";
    	document.getElementById("div2").style.left =n +"px";
    	m--;
        n--;
    	
    	if(m==-620)
    	     {m=620;}
    	if(n==-620)
    	{n=620;}	
         
    
    }
    setInterval (scroll,10); 
    </script>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2009
    Posts
    464
    setTimeout only fires the function passed as its argument once, then it dies of its own accord. setInterval keeps calling the function over and over again until it is stopped.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,148
    If you obtain a handle, either method can have its triggering ceased

    Code:
    x=setTimeout("someFunc()",10000);
    clearInterval(x);
    the set time out has been given a function to call in 10 seconds but the very next line clears the timer because a handle was obtained that can then be used to clear the timer. The same procedure for setInterval is employed if you want some control over how many callbacks take place.

    Code:
    function someFunc(){
        c = c + 1;
        if(c>9) clearInterval(y);
        console.log(">>> c="+c); // output to the browsers console
    }
    c=0;
    y=setInterval("someFunc()",1000);
    That will call the someFunc() function 10 times before clearing the call back.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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