jQuery UI - prevent Shake effect being fires multiple times

Question

just added some shake effect when user submit form on the inputs that not being full.

But when user press many times on submit button the shake effect fired many times.

How can I prevent it from being fired more than one time?

stop() - not workings.

clearQueue() - stop it even if it moves from it's first place in the page.

This is what I came with:

$(this).effect("shake");

Thanks :)

score 0 · Answer 1 · answered Apr 24 '16 at 15:07

0

if you can use an extra variables you can use a flag:

first_submit = true

if(first_submit){
  first_submit = false
  $(this).effect("shake");
}

answered Apr 24 '16 at 15:07

mohamed-ibrahim

10,837
4
39
51

score 0 · Answer 2 · edited May 23 '17 at 12:16

You could create a variable to set the effect is active (running). When your submit call is intercepted by a callback you verify if it's true, if yes you return. Preventing from another call.

In the effect callback (success) you set the variable false, for example. That's the cycle.

I have added an extension for the effect to callback it's success, look here: What is the true way of adding callback functionality to custom JQuery Animation?

Something like:

// Your new control
var active = false;

// Extending callback functionality to the animation
$.fn.shake = function ( times, distance, duration, callback ) {
    return this.css({ position: 'relative' }).each( function () {            
        for ( var i = 0, t = duration / times; i < times; i+= 1 ) {
            $( this ).
                animate({ left: -distance }, t / 3 ).
                animate({ left:  distance }, t / 3 ).
                animate({ left:         0 }, t / 4 );
        }

        $( this ).show( callback );
    });
};

// DOM load
$(document).ready(function(){
  
  // Triggering form the event
  $('#form_ID').submit({function(){
    
    if(active == true)
      return false;
    
    // trigger your event.. 
    shake(5, 10, 500, function () {
        $('#your_component_ID').removeClass( 'shaking' );
    });
  });
});

I guess you could take a look in this post too: jQuery prevent multiple clicks until animation is done

jQuery UI - prevent Shake effect being fires multiple times

2 Answers2