To setTimeout or setInterval

[Elemental]

Hello Folks, Hope your Java's are Scripting smoothly.I've been reading about the setTimeout and setInterval and honestly I don't know which one I should use, so...Let's say I have a link, this link could be an image or e text link, when the user moves over this link a ToolTip fades in and when the user moves away from it the ToolTip fades out; simple, right?So which of the two should or is the correct method to use for this event, setTimeout or setInterval?Peace,Elemental

[jeffman]

I don't think one's more correct, but I'll add some comments on how they are used.setInterval() is typically used when you want repeat an action or something as long as a page remains open. Set it once and forget about it. Like maybe you want to change a banner at the top of your page every minute. setInterval() calls the change function every minute. Easy.setTimeout() is a one-time thing. You could use that if you're giving you're user a timed quiz. After fifteen seconds, if the user hasn't clicked something, a Timeout function gets called. The function it calls runs once and is done. UNLESS the function it calls also uses setTimeout() to call itself recursively. This recursive calling really just mimics setInterval().So you want to fade an image by adjusting opacity every millisecond or so. You could easily use setInterval() to call a fade function. Part of the fade function keeps track of the opacity, and when it reaches 0, cancels the interval. That's probably the easiest way to go. But, as I said, if the fade function calls setTimeout() just before it ends, you get the same result.Whichever you use, store its return variable in a global so that it persists and can be canceled from anyplace in the script.

[Elemental]

I don't think one's more correct, but I'll add some comments on how they are used.setInterval() is typically used when you want repeat an action or something as long as a page remains open. Set it once and forget about it. Like maybe you want to change a banner at the top of your page every minute. setInterval() calls the change function every minute. Easy.setTimeout() is a one-time thing. You could use that if you're giving you're user a timed quiz. After fifteen seconds, if the user hasn't clicked something, a Timeout function gets called. The function it calls runs once and is done. UNLESS the function it calls also uses setTimeout() to call itself recursively. This recursive calling really just mimics setInterval().So you want to fade an image by adjusting opacity every millisecond or so. You could easily use setInterval() to call a fade function. Part of the fade function keeps track of the opacity, and when it reaches 0, cancels the interval. That's probably the easiest way to go. But, as I said, if the fade function calls setTimeout() just before it ends, you get the same result.Whichever you use, store its return variable in a global so that it persists and can be canceled from anyplace in the script.

Deirdre's Dad, Thanks for the feed back I appreciate it.I understand the fade event, it's similar to Flash's "alpha" settings, however, in Flash I can place an action / event, say on a frame, to remove / delete the file from the stage; how do I do accomplish that with JavaScript?Going back to my original post, if I have an embedded link in that ToolTip it will still be active even though it's no longer visible.Peace,Elemental

[jeffman]

I believe a "visible" element with 0% opacity (and it's children) still reacts to events, yes. Haven't tried it for a while, but that's my recollection. A hidden element does not respond to events. So it's the visibility property you want to toggle when the fade is done or just beginning. Your preference, you could also toggle the display property. Tooltips generally function as "layers" with some sort of positioning, so it really doesn't matter. A different kind of element, you might experiment. Hidden elements that have not been positioned still occupy their space. An element with display set to "none" occupies no space. If it's positioning is not set, an element toggling from, say, "block" to "none" will cause all the other elements on the page to change position in order to fill the vacuum. Distracting in some contexts. For a tooltip sort of thing, I like to toggle visibility. So you have a tooltip/thing and it's declared visibility is "hidden". When the user mouseovers the trigger element, set the tooltip's visibility to "visible" with 100% opacity. When the user mouseouts, wait x milliseconds and then fade to 0% opacity. At that point, set it's "visibility" property to "hidden". Now it's ready for the cycle to begin again.You're aware of the 3 varieties of opacity you need to account for? I believe Mozilla has at last abandoned it's proprietary version, but you'll want it for backwards compatibility. Updates are usually automatic, but you just don't know what users are really doing. Then there's IE . . . Declare all 3 opacities in your style sheet without a worry. If a browser doesn't know one, it generates a warning but keeps on ticking. To change one in javascript, test for the property first, and if it exists, then change it. You know:if (element.style.property) { element.style.property = blah blah;} else if . . . .Otherwise, if you try to set a non-existent property, you'll break your function, or maybe your whole script if it's an in-line statement.

[Elemental]

Deirdre's Dad Thank you again, sir, you give me much to learn about... It never ends, does it?Peace,Elemental