[thelist] timing, setTimeout and setInterval

Edwin Martin e.j.martin at chello.nl
Wed Jun 12 16:09:09 CDT 2002


Hi Tom Dell'Aringa, at 09:19 12-6-2002 -0700 you wrote:

>I've got a timing issue I'm having trouble with. In this component I am
>working on, we have
>controls the user clicks on. These controls provide feedback in the manner
>of a DIV tag becoming
>visible for a short time, showing them the value of the changed control,
>then disappearing. Dandy.
>
>The issue is of course the timing. The user may click on 3 or 4 controls
>fairly quickly (say in 3
>or 4 seconds) to change the view. This throws a wrench into the code. My
>first attempt was to use
>setTimeout("function()", 3000) to delay the calling of the script that
>hides the DIV again.
>Problem is, no matter what the user does, that setTimeout will run its 3
>seconds, and close the
>display DIV - even if the user has clicked on two other controls since
>then. What ends up
>happening is you get a feedback DIV that pops up and disappears right
>away, since the first 3
>seconds were up, and so on.
>
>So, I tried using setInterval() but basically had the same problem. I
>suppose I could set up 4
>scripts, one for each control - but hey - we all hate doing that. I prefer
>to keep my code terse
>and object oriented if I can.

You just have to call clearTimeout().

Something like this should work:

var timer = null;
function controlVA(EQ_control, conSize, adjust)
{
         clearTimeout( timer );
         // Adjust view
         switch(adjust)
         {
                 case "speed":
                 document.getElementById("viewerReadout").style.visibility
= "visible";
                 document.getElementById("viewerReadout").innerHTML = "<div
style=\"font-size: 10px; font-weight: bold;\">Speed</div>" + percent;
                 timer = setTimeout("hideReadout()", 3000);
                 break;

         }
}

Bye,
Edwin Martin.


>Here is a code snippet:
>================================================
>
>This is the DIV is use for display:
><div id="viewerReadout" style="blah blah blah; hidden..."></div>
>
>Below is a small part of the function that is called when a user adjusts a
>control, the part which
>I am having trouble with (ignore the parameters):
>
>function controlVA(EQ_control, conSize, adjust)
>{
>         // Adjust view
>         switch(adjust)
>         {
>                 case "speed":
>                 document.getElementById("viewerReadout").style.visibility
> = "visible";
>                 document.getElementById("viewerReadout").innerHTML =
> "<div style=\"font-size: 10px; font-weight:
>bold;\">Speed</div>" + percent;
>                 setTimeout("hideReadout()", 3000);
>                 break;
>
>         }
>}
>
>the hide function is simply:
>
>function hideReadout()
>{
>document.getElementById("viewerReadout").style.visibility = "hidden";
>}
>
>Any ideas are greatly appreciated! Feel free to suggest alternatives to
>how I am doing this, I am
>open to anything that will suit the purpose.
>
>/tom

---
Surf Edwin Martin's brainwaves: http://www.bitstorm.org/edwin/





More information about the thelist mailing list