javascript - jQuery 滑动切换在双击时触发两次

Question

如何防止切换在双击时滑动两次？

我有一个按钮可以触发滑动切换。如果单击该按钮一次，它可以正常切换，但如果单击该按钮两次，则滑动切换滑出然后立即滑回。

即使在双击时，我怎样才能让滑动切换保持在外面？

代码在这里:https://codepen.io/anon/pen/Ljgqjo

JS:

$('button').on('click', function(){
    $('#one').fadeOut('slow', function(){
        $('#two').toggle('slide', {direction: 'right'}, 800, function(){
            

        });
    });
});

.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>

Answer 1

设置一个标记来跟踪您的动画是否正在运行。在允许单击操作产生任何效果之前检查它是否已设置。动画完成后取消设置:

var animating = false;
$('button').on('click', function(){
    if(!animating){
        animating = true;
        $('#one').fadeOut('slow', function(){
            $('#two').toggle('slide', {direction: 'right'}, 800, function(){
                animating = false;
            });
        });
    }
});

这具有防止三次点击(和四次点击等...)的额外好处