Best way to prevent javascript function from executing while it is already there, or another?
I am using jquery and what I am doing is binding the toggle method to multiple buttons on the web page. It looks something like this.
$('.button').toggle(function(){
// first function
}, function(){
// second function
});
However, both of these functions have animation. Thus, the user can press the button when the first or second function is executed. And it will mess up the order of the HTML elements and can cause them to go to the bottom of the page. Because, essentially, these functions move one element to the end on the first click, and on another click, move it back to where it was originally.
Of course, it is difficult to press a button as it moves across the page. But it is possible.
source to share
It looks like you will be happier to implement your own switch. Toggle really only works for cases with 0 extra logic.
$('.button').click(
function () {
if( $(self).is(":animated") {
return false;
}
if($(self).is(".rolledup")) {
self.apply(roll_window_down);
} else {
self.apply(roll_window_up);
}
});
function roll_window_up() {
$(self).addClass( 'rolledup' );
// first function
}
function roll_window_down() {
$(self).removeClass( 'rolledup' );
// first function
}
source to share
You can use a flag. Set the "isAnimating" flag to true
when the animation starts and false when it ends. Any subsequent animation can continue only if this value is false
.
You can also check if : an animated selector is appropriate for the event owner. And base your decisions on that.
source to share
You need to put the two functions you are passing to toggle in the context where you can hold a flag to control the input of the function: -
(function() {
var toggling = false;
$('.button').toggle(function(){
if (!toggling) {
toggling = true;
// first function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
}, function(){
if (!toggling) {
toggling = true;
// second function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
})
)();
NB . Serializes all item radio buttons that have a class .button
. IOW there is only one flag for all buttons toggling
. If you want each button to have its own toggle flag: -
$('.button').each(function() {
var toggling = false;
$(this).toggle(function(){
if (!toggling) {
toggling = true;
// first function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
}, function(){
if (!toggling) {
toggling = true;
// second function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
});
);
source to share
You need a queue. You can build one with a semaphore variable, but jQuery already provides one, so maybe you want to use it:
$('.button').toggle(function() {
$(document).queue("foo", function() {
...
});
}, function() {
$(document).queue("foo", function() {
...
});
});
jQuery usually uses the "fx" queue to serialize animations, but you can use this "foo" queue for whatever you want.
The queue can be placed on any object, so perhaps you want to place it in a container that contains all the objects .button
. You cannot put it on the button (this) yourself, or you will return to where you are now.
Once you've done that, all you really need to do is interrupt the animation. This can be done by explicitly emptying the "fx" queue, or you can use $('.button').stop();
it to stop all old animations.
source to share