settimeout

**utofranz** · 10-25-2010 07:47 PM

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?

**Kor** · 10-26-2010 03:40 AM

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?

**utofranz** · 10-26-2010 04:48 AM

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)

**Kor** · 10-26-2010 05:11 AM

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>

**utofranz** · 10-26-2010 05:30 AM

cute. thanks so much. that's so much easier.

**utofranz** · 10-26-2010 06:42 AM

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...

**Kor** · 10-26-2010 06:59 AM

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>

Thread: settimeout

Thread Tools

Display

settimeout

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions