asked on

How to interupt and restart a javascript function if it is repeatedly called?

I have a 'yellow fade technique' function running which fades the border of a <div> so that the user is visually alerted to an as-you-type response on the page. He types in a form field and a preview div is updated with the content and highlighted using the yellow fade on the border only.

Because the border fade is called everytime onKeyUp this queues up the requests to run the fade so a fast typist sees a whole load of these fades in sucession even after he stops typing.

I want to know how to stop a particular function from running if it is asked to run again. This should result in the function reseting each time it is called so that in this case the border stays yellow until after the last onKeyUp and just fades away once.

basicinstinct

best if you post some code...

aoline

ASKER

I'm using this library as a base:

http://www.iamjacksdesign.com/downloads/fade.js

Thanks

ASKER CERTIFIED SOLUTION

basicinstinct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

aoline

ASKER

Thanks that has stopped the repeat queuing so the function only runs while the typing in progress as soon as the timing stops so does the function.

This however meant that as I type a very long passage the fade repeats its cycle rather than being interupted and resetting the color to the FADE_RED etc.

So I included a trigger var that I only passed to the function when typed and this allowed me to reset the RGB colors to the original so if I paused while typing the fade started but if I started typing again before the fade had finished it reset. This means typing quickly apears to keep the color and the fade only completes after stopping typing.

I didn't really understand how your lines worked - would you please add extra detailed comment lines to help me so I can consider using this approach on other functions.

      var tout;

      if(tout != null)
      clearTimeout(tout);
      tout = setTimeout('fade("' + container + '",0)', FADE_HOLD)

Thanks
Matthew

basicinstinct

var tout; //global variable to store a reference to the timeout

if(tout != null) //check if we have already set a timeout
clearTimeout(tout); //if a timeout has already been set then cancel it
tout = setTimeout('fade("' + container + '",0)', FADE_HOLD) //set a new timeout and store a reference to it in the global variable (tout)

aoline

ASKER

Thanks,

What I don't understand fully is this line

tout = setTimeout('fade("' + container + '",0)', FADE_HOLD) //set a new timeout and store a reference to it in the global variable (tout)

Does it only set the var tout AFTER the setTimeout has expired?
This should mean that there is a point in the cycle where the var tout does not have a value hence don't repeat the fade() command.

Thanks