Question

I have written a JQuery program that, on the press of a button, runs a dozen or so setTimeout’s as well as a few animations. The program operates on existing div’s, changes their HTML (using id selectors), fades in, fades out, etc…

The entire process can take up to 15 seconds. The problem is that if the button is pressed again within that time frame then the fade ins and outs start piling on top of each other and looking weird.

Is there something that I can use so that if the button is pressed again then all JQuery stuff in progress just stops and is cleared out? I have tried using clearTimeout, which doesn’t seem to work.

Answer 1

You can either use .stop() or .clearQueue().

When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

And you can also prevent the button from doing any actions until the timer is finished.
You can put a Boolean variable that after the first click get value of false and when the timer is finished, turn this variable back to true and check for it whenever you click the button.