Javascript 防止用户点击

我得到了一个基于菜单选项显示内容的功能，每次用户单击不同的选项时，当前活动内容将淡出，单击的内容将显示（已确定选项的每个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

设置一个变量

isTransitioning

。当用户单击时将其设置为

true

，当动画完成时将其设置为

false

。如果用户在

为true时单击，则忽略该单击。
使用选择器检查元素是否尚未完成动画并相应地执行操作

例如

或者，您可以在调用任何动画方法之前使用，以便强制完成上一个动画。
向您展示Kolink所说的内容-

在$（文档）.ready（函数（）中）

在$（$菜单）中，单击（函数（）{
把所有的东西都包在一个IF里

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

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

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

它设置了一个2秒的时间限制，在能够单击项目之间
尝试进行拍摄。它应该在菜单项的父项上设置一个标志（我假设为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;
        }
        });
});

使用以下方法终止菜单元素上的当前动画：

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

然后做任何你想做的其他动画

$(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;
        }
        });
});

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