Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Passing variables in Timeouts

Status
Not open for further replies.

mrjcfreak

Programmer
Joined
Jan 19, 2006
Messages
3
Location
GB
I am wanting to set a timeout for a function...

if not in a timeout, the function would be called as follows:

transition([html element],[string],[int]);

e.g.
el = document.getElementById("mydiv")
transition(el,"my div",0);

I am having problems doing this with a setTimeout though...
el = document.getElementById("mydiv");
mystring = "my div";
setTimeout("transition("+el+","+mystring+",0)",30)

Is giving me an error in the 'fox JSConsole of "missing ] after element list"

Any ideas?
 
replace
setTimeout("transition("+el+","+mystring+",0)",30)

with
setTimeout("transition([!]document.getElementById("mydiv")[/!],[!]'[/!]"+mystring+"[!]'[/!],0)",30)

You sort of figured out that you can't pass a variable, so you're going to have to get it again (getElementbyId). The string will be a part of the setTimeout parameter, but as the actual STRING that the variable (myString) represents. Therefore, it needs to be in quotes.

'hope that helps.

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
try changing this
Code:
setTimeout("transition("+el+","+mystring+",0)",30)

to this
Code:
setTimeout("transition(el,[!]'[/!]"+mystring+"[!]'[/!],0)",30)

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Whoops... watch out for quotes in quotes.

From my original suggestion, change
setTimeout("transition(document.getElementById("mydiv"),'"+mystring+"',0)",30)

to:
setTimeout("transition(document.getElementById([!]'[/!]mydiv[!]'[/!]),'"+mystring+"',0)",30)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
I noticed the quotes!

I have actually adopted a simpler (if a little cruder) method, whereby only the id is passed as an argument, and the Element is 'get'ed again by the function which receives it.

However, I think my original problem is an interesting lesson in any case, so here goes explaining it.

My problem is caused by me using a more complicated function, the problem lies higher up.

See if you can figure out what I am trying to do here:

I have a row of 6 images, which I want to apply a transition effect to. However, I don't want to start them all simultaneously, I want them to start slightly out of sync, behind one another, a mexican wave effect. The transition effect is handled by a function called splash, which takes a HTML image object (as attainable by d.getElementById("imgid")) as an argument.

My images have id's of grid1, grid2, grid3 etc. up to grid6


onload = function() {
d=document;
for(i=1;i<7;i++) {

//If I wanted to start all the images at once, I would have no problem, I would do this:
//splash(d.getElementById("grid"+i))
//However, I effect the transition by using a timeout, with the delay before it starts increasing in length as we go along, to give us a mexican wave effect

//Candidate one:
//setTimeout("splash(d.getElementById('grid'+i));",i*60);
//Now this doesn't work, as by the time the Timeout is executed, it looks up the value i has, and it isn't the value we wanted, as the for loop has changed it.
//The d.getElement obviously returns nothing useful, and the splash function has no image to do it's thing to.

//Candidate two:
//setTimeout("splash("+d.getElementById('grid'+i)+");",i*60);
//This seemed to me to be the most logical way of doing things... we get the element now, and plop it in as an argument to be used later. Surely the getElement... returns an object, so we can put this in?
//No, the Console says: "missing ] after argument list" - bugger.

//Candidate three we know wont work but we'll try all the same: lets try passing the object element as a string- we do this by adding quotes around it- either escaped doubles or singles... lets try both.
//setTimeout("splash('"+d.getElementById('grid'+i)+"');",i*60); //single quotes; this passes a string who's value is "[object HTMLImageElement]" - pretty, but pretty useless

//setTimeout("splash(\""+d.getElementById('grid'+i)+"\");",i*60); //escaped double quotes; this has the same effect

//Candidate four: we go back to the beginning, but instead of passing i as a variable, we get the value for i and slap it in the timeout...
setTimeout("splash(d.getElementById('grid'+"+i+"));",i*60);
//it works!

}//end of loop
}//end of onload function

I hope you get what I mean, I had fun working it out in any case!

Does anyone know about the overheads involved in a: constantly recalling d.getElementById
and b:
passing HTML objects as arguments;

and which is more economical?
 
mexican wave effect

'never heard of that.

//Candidate one:
//setTimeout("splash(d.getElementById('grid'+i));",i*60);
//Now this doesn't work, as by the time the Timeout is executed, it looks up the value i has, and it isn't the value we wanted, as the for loop has changed it.

Fixed simply by using quotes appropriately:
setTimeout("splash(d.getElementById('grid[!]"[/!]+i[!]+"'[/!]));",i*60);

//Candidate two:
//setTimeout("splash("+d.getElementById('grid'+i)+");",i*60);
//This seemed to me to be the most logical way of doing things... we get the element now, and plop it in as an argument to be used later. Surely the getElement... returns an object, so we can put this in?

All setTimeout wants for the first argument is a STRING. It will execute this STRING after the delay of the second argument. Whatever that STRING READS is what the application will then execute. It cannot read an OBJECT.

//Candidate four: we go back to the beginning, but instead of passing i as a variable, we get the value for i and slap it in the timeout...
setTimeout("splash(d.getElementById('grid'+"+i+"));",i*60);

Pretty much what Candidate 1 turns into with the new method of quoting I suggest. You unnecessarily complicate matters with your 'grid'+, however, as the "+i+" concatenates the appropriate value of i in the appropriate place. In other words: 'grid'+"+i+" translates into (when i=1) 'grid'+1 or 'grid1'. Similarly, and easier to read: 'grid"+i+"' translates into (when i=1) 'grid1' in one step. Slightly more economical.

You can avoid the overhead of "constantly recalling d.getElementById" by loading the image objects into a global array at ONLOAD and sending only i as the parameter. In splash(...), then, you would use the parameter (i) as the index to reference the image array. Only one getElementById-per-image and no passing of objects in function calls.

It is fun to work with JavaScript though... you're right about that! I know it's Geeky to say so, but... I never said I wasn't a Geek!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top