Question

当用户在未满的输入上提交表单时，添加了一些摇晃效果。

但是当用户多次按下提交按钮时，摇动效果会多次发生。

如何防止它被多次触发？

停止（） - 不适用。

clearQueue（） - 即使它从页面的第一个位置移开也会停止。

这就是我的意思：

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

谢谢：）

Answer 1

如果你可以使用额外的变量，你可以使用一个标志：

first_submit = true

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

Answer 2

您可以创建一个变量来设置效果处于活动状态（正在运行）。如果您的提交电话被回调拦截，您可以验证它是否属实，如果是，则返回。防止另一个电话。

在效果回调（成功）中，您将变量设置为false，例如。这就是周期。

我为效果添加了一个扩展程序来回调它的成功，请点击此处：What is the true way of adding callback functionality to custom JQuery Animation?

类似的东西：

＆＃13;

// 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' );
    });
  });
});

＆＃13;

我想你也可以看一下这篇文章：jQuery prevent multiple clicks until animation is done

jQuery UI - 防止Shake效果多次触发

2 个答案: