Resetting the "setTimeout()" clock

[createErrorMsg]

Hello, all.

I'm using a script in a page to display either more links or a string of text in a box when the user mouses over a link. Because the user then needs time to move the pointer over to the newly displayed links and make a selection, I used setTimeout() to delay the display box's return to it's default value.

All of this works fine, except when you mouse over several links in a row. The setTimeout() timer seems to start on the first link you mouseover and then times out (and returns to the default text) at the end of the time, even if you have subsequently moved over other links.

What I need to find is a way to clear out the timer when ever a new link is moused over. I'm not sure how to do this.

I would appreciate any help you can give me. Here's the js code. I'm calling the function showDetail(x) with onmouseover and hideDetail() with onmouseout.

Peace.

var details = new Array();
details[0] = "Point to a link for more options and information."
details[1] = "link1: <a href='#'>sublinkOne</a> ¦ <a href='#'>sublinkTwo</a> ¦ <a href='#'>sublinkThree</a> ¦ <a href='#'>sublinkFour</a>"
details[2] = "link2: <a href='#'>sublinkOne</a> ¦ <a href='#'>sublinkTwo</a> ¦ <a href='#'>sublinkThree</a>"
details[3] = "link3: <a href='#'>sublinkOne</a> ¦ <a href='#'>sublinkTwo</a> ¦ <a href='#'>sublinkThree</a> ¦ <a href='#'>sublinkFour</a>"
details[4] = "Send us an e-mail with any questions, comments or concerns."
details[5] = "Information about our company, staff and affiliates."
details[6] = "View the <em>legalese</em> associated with our site."

function showDetail(x) {
for (var i = 0; i < details.length; i++) {
if (i = x) {
var linkDetail = details[i];}
break;}
document.getElementById("detail").innerHTML = linkDetail;
}

function hideDetail() {
setTimeout("document.getElementById('detail').innerHTML = details[0];", 7000);
}

[Rambo Tribble]

There is a method, clearTimeout(). What is usually done is to assign the result of the setTimeout() command to a variable, then use clearTimeout on the variable. Kind of like:
var timeSet=window.setTimeout("myFunc()",7000);
window.clearTimeout(timeSet);

[createErrorMsg]

Rambo, thanks for the response.
Since I need to use the clearTimeout() method at the beginning of the showDetail(x) function, I would need to define the variable to hold setTimeout as a global variable.
The problem I'm having, then, is how to use that setTimeout variable in the function hideDetail() to make it run.
Does that make sense?

[Rambo Tribble]

When you assign the setTimeout value to the existing variable, if it is global, that should overwrite whatever is there. That alone may solve your problem, without the clearTimeout.
Just declare the variable with the var x; syntax at the top of your script (not actually necessary, but good style), then use it without the var declaration thereafter (in fact, not using the var syntax initializes a variable as global regardless, but best to learn syntax that is cross-language).

[createErrorMsg]

Okay. I think I misinterpretted your advice and accidentally did something that made the script work (story of my life).
So even though it is working, I'm not real happy with it because I have a feeling the script is currently "in bad form."
Question: If setTimeout() is stored in a variable, and I want to call that setTimeout(), not in the midst of doing anything else, but just by itself, what is the proper way to do that? Just putting:

function hideDetail() {
timeSet;
}

doesn't work. I put:

function hideDetail() {
timeSet = setTimeout(blahblahblah);
}

and it did what I wanted, but, again, I get the feeling that's not good form.

[Rambo Tribble]

Your second example looks like the preferred form. It is usually desireable in JavaScript, when creating an object, to do it by assigning the object to a reference variable. This is true in the case of say, a window like:

var newWin=window.open("","","height=200px");

Now the window can be manipulated simply by applying commands to the newWin variable.

[Rambo Tribble]

On second glance, I did note that you may not have initialized the variable with a var timeSet; at the beginning of the script block. While not strictly necessary, it is generally considered better form. Do the declaration at the very top, after the opening script tag and before you declare any functions. That makes it clear to anyone which are global variables, at the outset. Many languages, other than JavaScript, require variable declaration to be at the beginning of a program.