Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    setTimeout() and arrays

    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.

    Code:
    //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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.
    Code:
    setTimeout(
      function(){
        el.innerHTML = newStr[i]; 
      }, 
      (1000*i));

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. still can't get it to work. It just puts "undefined" onto the page.

    Here's all the functions that link together:

    Code:
    //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

  • #4
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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:
    Code:
    //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);
    }

  • #6
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •