防止用户点击

Question

我有一个功能，显示基于菜单选项的内容，每次用户点击一个不同的选项，当前活动内容将淡出和点击内容将显示（每个div从确定的选项将按顺序显示），我的问题是我如何防止用户快速点击，例如，如果他决定在最后一个结束之前点击不同的部分，它会搅动动画的东西，这是我的代码。

$(document).ready(function() { 
    $("#Default .box").fadeIn(); 
    var $aBox = 0; 
    var $menu = "#inner_menu li"; 
    var $myliID = 0; 
    var $myBox = "#Digital_Box .box"; 
    var $myActiveBox = 0; 
    var $myHeight = 0; 

    $($menu).click(function() { 
     var delay = 0; 
     $myliID = $(this).attr("id"); 
     $myBox = "#" + $myliID + "_Box .box"; 
      if ($aBox == 1) { 
      if ($myActiveBox != $myBox) { 
       $($myActiveBox).fadeOut(300); 
      } 
     $($myBox).delay(300).each(function() 
      { 
       $(this).delay(delay).fadeIn(300); 
       delay += 500; 
       }); 
      $aBox = 1; 
      $myActiveBox = $myBox; 
     } 
     else 
     { 
      $("#Default_Box .box").fadeOut(300); 
      $($myBox).delay(300).each(function() 
       { 
        $(this).delay(delay).fadeIn(300); 
        delay += 500; 
       }); 
      $aBox = 1; 
      $myActiveBox = $myBox; 
     } 
     }); 
}); 

正如你可以看到我的li元素匹配，并且它是通过他们的ID确定的内容，一切工作正常，但问题是快速点击，而不是让其他动画完成。

如果我的编码很烂很抱歉，我想开始写我自己的“插件”：P

Answer 1

为了告诉你什么是Kolink说 -

在$（文件）。就绪（函数（）

var isTransitioning = false; 

在$（$菜单）。点击（函数（）{ 包裹一切中频

if (isTransitioning == true) { 
     // do nothing 
    } else { 
     // your code 
    } 

然后在你的代码的开头添加这

isTransitioning = true; 
    setTimeout(function() { 
    isTransitioning = false; 
    }, 2000); 

其中能够点击项目的时间限制为2秒

Answer 2

设置一个变量isTransitioning。当用户点击时使其成为true，当动画完成时使其成为false。如果用户在true时点击，则忽略该点击。

Answer 3

使用:animated选择器检查元素是否尚未完成动画并相应地执行操作。

E.g.

if(!$(element).is(':animated')){ 
    //element has finished animation 
} 

或者，你可以调用任何动画方法，使先前的动画被强制完成之前使用stop(true, true)。

Answer 4

试着给这个镜头。它应该在菜单项的父级（我假设的UL元素）上设置一个标志，以便后续点击任何菜单项都不会执行任何操作，直到前一个菜单项完成动画。

$(document).ready(function() { 
    $("#Default .box").fadeIn(); 
    var $aBox = 0; 
    var $menu = "#inner_menu li"; 
    var $myliID = 0; 
    var $myBox = "#Digital_Box .box"; 
    var $myActiveBox = 0; 
    var $myHeight = 0; 

    $($menu).click(function(e) { 
     if($(this).parent().data('animating')) { 
      //already animating 
      e.preventDefault(); //stop default click action 
      e.stopImmediatePropagation(); //stop click event bubbling 
      return; //prevent the animaton from firing below this line 
     } 
     $(this).parent().data('animating',true); 
     var delay = 0; 
     $myliID = $(this).attr("id"); 
     $myBox = "#" + $myliID + "_Box .box"; 
      if ($aBox == 1) { 
      if ($myActiveBox != $myBox) { 
       $($myActiveBox).fadeOut(300); 
      } 
     $($myBox).delay(300).each(function() 
      { 
       if($($myBox).last()[0] == this) { 
        //this should cause the last animated item to callback and remove the animating flag from the parent (UL item for the menu list) 
        $(this).delay(delay).fadeIn(300,function(){ 
         $(this).parent().data('animating',false); 
        }); 
       } else { 
        $(this).delay(delay).fadeIn(300); 
       } 
       delay += 500; 
       }); 
      $aBox = 1; 
      $myActiveBox = $myBox; 
     } 
     else 
     { 
      $("#Default_Box .box").fadeOut(300); 
      $($myBox).delay(300).each(function() 
       { 
        if($($myBox).last()[0] == this) { 
         //this should cause the last animated item to callback and remove the animating flag from the parent (UL item for the menu list) 
         $(this).delay(delay).fadeIn(300,function(){ 
          $(this).parent().data('animating',false); 
         }); 
        } else { 
         $(this).delay(delay).fadeIn(300); 
        } 
        delay += 500; 
       }); 
      $aBox = 1; 
      $myActiveBox = $myBox; 
     } 
     }); 
}); 

Answer 5

杀死使用该上你的菜单元素当前动画：

$("#inner_menu li").stop(true, true); 

然后做你想要做什么其他的动画。