Can't get function to pass object ID back to itself

[whoisgregg]

Here's the function:

function looping(the_object) 
{ 
alert(the_object); 
if ( the_object!= null ) { 
setTimeout("looping(the_object);", 10); 
}} 

This is how I call it:

<a href = "#" onMouseOver="looping('specific_object1');"> 
<img src="test.gif" name="specific_object1" id="specific_object1" /></a> 

The first time it runs I get specific_object1, the second time I get undefined. How do I get it to return specific_object1 every time?

Thanks in advance for any help you can provide! (This is the boiled down, widgetized version of the code that isolates my specific problem. The "the_object!= null" is not the actual test being performed to determine the loop.)

[Bernard Marx]

You have to think in terms of strings.
setTimeout executes a string in a global context.

You want this executed:

looping('specific_object1')

but this:

setTimeout("looping(the_object);", 10)

gives this:

looping(the_object)

The variable, the_object, is local to the function, not outside (globally) where statements passed through setTimeout are executed.

So:

// note the single quotes
setTimeout("looping([blue]'[/blue]"+the_object+"[blue]'[/blue]);", 10)

(But, to be cross-browser, you should use

document.getElementById

in the function.

[whoisgregg]

That does the trick. I've not used setTimeout before and failed to understand what was happening. Thanks for the solution and especially for the explanation. :D

My actual function uses

document.getElementById

, I just wanted the barest script to post here. :)

[Bernard Marx]

It's the classic nightmare, with two things to look out for
[building a valid string, executing globally].

setTimeout/Interval are overloaded with a second implementation that has slightly different rules. If you combine this with an inner function to form a closure, you can get round the problem of always needing a string to identify objects. You might find this entertaining.

thing = {name:'Thing'};
thing.timer = looping(thing)
function looping(obj) 
{ 
    var k=0;
    function repeat(){
        alert(obj.name + '\nk = '+ k++);
    }
    return setInterval(repeat, 2500);
} 

[whoisgregg]

lol... Nice! :)

[pliny]

I have a similar, annoying problem. When executing a setTimeout() I can't seem to hang on to objects. Apparently a scoping issue.

var footerObj = document.getElementById("footy"); 
setTimeout("footerObj.style.visibility='visible';",3000); 
alert(footerObj);

The above code correctly alerts with an [object HTMLDivElement], but the Firefox JS Console flashes a "Error: footerObj is not defined."

In other words, the footerObj is not available to the scope of the setTimeout() method. The string itself is correct, but since setTimeout() only executes a string, we lose the [element] in the process.

My solution is to simply query the footerObj in a separate method and call it:

setTimeout("showFooter();",3000); 
function showFooter() { 
var footerObj = document.getElementById("footy"); 
footerObj.style.visibility='visible'; 
}

This works. So my only question here is, is there another way to make this work? Or is it a limitation of the setTimeout() function?

[MikeFoster]

Hi pliny,

You are right, it's a variable-scope issue. If the variable 'footerObj' were a global variable, then it would work. However, I think your solution with the function 'showFooter' is better.