...

View Full Version : setTimeout() and arrays



d11wtq
01-26-2005, 10:32 AM
Hi,

I'm trying to use a variable from an array within the setTimeout() function but it does n't let me do it. I'm using a for loop to generate the indexes.



//Scrolls label text
function animate_label(ltext, which, hex, tdelay) {
el = document.getElementById(which)
var newStr = new Array()
for (var i=0; i<=ltext.length; i++) {
newStr[i] = substr_col(ltext, hex, i)
//t_out = i*tdelay
setTimeout('el.innerHTML = newStr[i]', (1000*i))
}
}


The function substr_col() definitely works and the for loop is generating the correct data (tested using alerts). I get an error (in IE) " 'i' is undefined "

It doesn't see " i " as a variable. It's because it's in quote I know but this is how setTimeout works. Can I do this another way? Thanks

glenngv
01-26-2005, 10:40 AM
If you specify a quoted expression in setTimeout/setInterval, it works in the global scope just like eval. So local variables are not accessible. Specify an anonymous function instead.


setTimeout(
function(){
el.innerHTML = newStr[i];
},
(1000*i));

d11wtq
01-26-2005, 11:10 AM
Thanks. still can't get it to work. It just puts "undefined" onto the page.

Here's all the functions that link together:



//Change substr color
function substr_col(stext, hex, sz) {
newStr = '<font color="'+hex+'">'+stext.substr(0, sz)+'</font>'+stext.substr(sz)
return newStr
}

function apply_label(el, labeltext) {
el.innerHTML = labeltext
}

//Scrolls label text
function animate_label(ltext, which, hex, tdelay) {
el = document.getElementById(which)
var newStr = new Array()
for (var i=0; i<=ltext.length; i++) {
newStr[i] = substr_col(ltext, hex, i)
setTimeout(function() {el.innerHTML = newStr[i]}, (100*i))
//el.innerHTML = '<font color="'+hex+'">'+ltext.substr(0,2)+'</font>'+ltext.substr(2)
}
}


Looks a bit messy cos I keep swapping bits and substituting with functions etc to get it working

d11wtq
01-26-2005, 11:18 AM
To make things cleare all I'm trying to do is really really simple but I'm getting all stressed over it. I've done far more complex things with JS and this tiny little thing just wont work :-(

I have a word in a <span> tag. Just one word.

When the user puts the mouse over an image above it I want the letters to change color one at a time in sequence so that the full word is eventually a new color.

I'm sure I'm making it more complex than it needs to be.

glenngv
01-26-2005, 11:37 AM
Remember that setTimeout does not halt the execution of the remaining scripts, it just schedules the expression or function for the specified time. So putting setTimeout inside the for-loop does not make the iteration slower, it still iterates normally, only the execution of the expression or function specified in the setTimeout is delayed.

Try this:


//Scrolls label text
function animate_label(ltext, which, hex, tdelay) {
var el = document.getElementById(which);
timer = setTimeout(function(){animate(el, ltext, hex, 0, ltext.length);}, 0);
}

var timer;
function animate(el, ltext, hex, i, max){
el.innerHTML = substr_col(ltext, hex, i);
if (i<max) timer = setTimeout(function(){animate(el, ltext, hex, i+1, max);}, 1000*i);
else clearInterval(timer);
}

d11wtq
01-26-2005, 12:24 PM
Thanks that works really well... played around with the code for abit cos it decelarated due to the increment in " i ".

Never thought of just using setTimeout in the other function.... Nice one cheers ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum