www.webdeveloper.com
Results 1 to 7 of 7

Thread: settimeout

Hybrid View

  1. #1
    Join Date
    Oct 2010
    Posts
    4

    settimeout

    i've being trying to change the src of a img tag in order to create some kind of a sequence of images.
    Code:
    <script type="text/javascript">
    var i=0;
    function r() {
    	i++;
    	if(i==4){e=1;}
    	var src = "img-" + e + ".jpg"; //images are sorted by number (img-1,img2...)
    	this.src = src;
    	setTimeout(r.call(this),2000);
    	}
    </script>
    ....
    <input type="button"  onclick="r.call(document.getElementById('impar'));">
    <div><img id="impar" src="" ></div>
    the code seems to work, but runs too fast,setTimeout does't look to do anything. if I replace this with this code
    Code:
    <script type="text/javascript">
    var i=0;
    var f=null;
    function r() {
    	i++;
    	if(i==4){e=1;}
    	var src = "img-" + e + ".jpg"; 
    	foo.src = src;
    	setTimeout(r,2000);
    	}
    function init(a){
            f=a;
            r();
            }
    </script>
    ....
    <input type="button"  onclick="init(document.getElementById('impar'));">
    <div><img id="impar" src="" ></div>
    everything works fine.i know call is not the very right thing to been used, but i don't understand why setTimeout dosn't work. some clue?
    Last edited by Kor; 10-26-2010 at 05:56 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Are you sure it works? In your first code: Where have you defined the custom method f.call()?The variable e is undefined till i==4, so you will encounter an error at the first 3 loops. this will not refer the image object but either the Global Window Object, or the input element.

    In your second version: Where have you defined the variable foo?

    What in fact you want to do?

  3. #3
    Join Date
    Oct 2010
    Posts
    4
    my fault, i made some mistakes copying. the exact code should be:
    Code:
    <script type="text/javascript">
    var i=0;
    function r() {
    i++;
    if(i==4){i=1;}
    var src = "img-" + i + ".jpg"; //images are sorted by number (img-1,img2...)
    this.src = src;
    setTimeout(r.call(this),2000);
    }
    </script>
    ....
    <input type="button" onclick="r.call(document.getElementById('impar'));">
    <div><img id="impar" src="" ></div>
    there is no f.call method.and the second:
    Code:
    <script type="text/javascript">
    var i=0;
    var f=null;
    function r() {
    i++;
    if(i==4){i=1;}
    var src = "img-" + i + ".jpg";
    f.src = src;
    setTimeout(r,2000);
    }
    function init(a){
    f=a;
    r();
    }
    </script>
    ....
    <input type="button" onclick="init(document.getElementById('impar'));">
    <div><img id="impar" src="" ></div>
    i need to change the source of an img tag, just to let have a kind of presentation of the images. the code do works, indeed if i add an alert() to show the this.src, the source do change, a sort of loop is set up, and the images shown do change, but this happens just to fast, so that is possible to see the changing only with the alert message. the strange speed of the loop is visible also if i combine this loop with some other tween, lasting 2sec too (settimeout is set with 2000msec):with the alert() on, the tween doesn't even starts; alert off and tween goes on, but the img tag goes stuck to a certain image (and the fact that in different browser(firefox,safari,chrome) the image is not the same makes me think the loop is on, but runs too quick)
    Last edited by Kor; 10-26-2010 at 05:57 AM. Reason: wrap the code [code][/code]

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function startCarousel(id,i){
    var img=document.getElementById(id);
    img.src='img-'+i+'.jpg';
    i++;
    i==4?i=1:null;
    setTimeout(function(){startCarousel('impar',i)},2000)
    }
    </script>
    </head>
    <body>
    <form action="">
    <input type="button" value="Start" onclick="startCarousel('impar',1)">
    <div>
    <img id="impar" src="">
    </div>
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Oct 2010
    Posts
    4
    cute. thanks so much. that's so much easier.

  6. #6
    Join Date
    Oct 2010
    Posts
    4
    mmm another problem...in your startCarouse, when invoking the settouttime, you refer to a precise element

    setTimeout(function(){startCarousel('impar',i)},2000)

    what if i want to use the same funtion for a different element, for instance if i have several img tag? i was using this for this instance.
    code like

    setTimeout(function(){startCarousel(img,i)},2000) //img is a variable declared before in the function

    doesn't work...

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Sorry, my mistake. Should be:
    Code:
    setTimeout(function(){startCarousel(id,i)},2000)
    I really don't understand how you could have used this the way you said. If: a function is not a constructor or a function was not fired dynamically via an new created event or a function is not an anonymous inner function (none of them was in your case), this will refer the Global Window Object.
    Code:
    <script type="text/javascript">
    function startCarousel(){
    alert(this)
    }
    </script>
    Last edited by Kor; 10-26-2010 at 08:02 AM.

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