Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 992
  • Last Modified:

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.
0
aoline
Asked:
aoline
  • 3
  • 3
1 Solution
 
basicinstinctCommented:
best if you post some code...
0
 
aolineAuthor Commented:
I'm using this library as a base:

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

Thanks
0
 
basicinstinctCommented:
well, not tested, but try this...

add a new global variable, 'tout' to the others, so it will look like this:

var fade_r = FADE_RED
var fade_g = FADE_GREEN
var fade_b = FADE_BLUE
var tout;

then, replace this line (wherever you see it):

setTimeout('fade("' + container + '")', FADE_HOLD)

with these lines:

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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
aolineAuthor Commented:
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
0
 
basicinstinctCommented:
     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)
0
 
aolineAuthor Commented:
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
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now