javascript - 如何防止连续点击元素？

Question

我想防止连续点击按钮 .toggler。当我点击它时，div 是正常切换的，但是如果我连续点击它多次，div 会切换多次，直到所有的点击事件都没有完成。

期望的是，如果我单击按钮，它的单击事件应该关闭，直到 div 没有被正确切换。之后它的点击应该是打开的。

连续多次点击按钮查看问题。

$(document).ready(function() {
  $('.toggler').on('click', function(event) {
    event.preventDefault();
    $('.main-div').slideToggle('slow');
  });
});

* {
  margin: 0px;
  box-sizing: border-box;
}

.main-div {
  width: 80%;
  float: right;
  height: 200px;
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="toggler">Toggle</button>
<div class="main-div"></div>

我试过的 jQuery 代码是:

$(document).ready(function() {
  $('.toggler').on('click', function(event) {
    event.preventDefault();
    var thisEement = $(this);
    thisEement.off('click');
    $('.main-div').slideToggle('slow', function(){
      thisEement.on('click');
    });
  });
});

但这并没有像预期的那样工作。

如有任何帮助，我们将不胜感激<3.

Answer 1

slideToggle 有一个回调函数，在操作完成时调用。因此，您可以引入一个新的 bool 变量，该变量将在操作开始时设置为 false，并在切换完成时更改回 true。

$(document).ready(function() {
    var flag = false;
    $('.toggler').on('click', function(event) {
        event.preventDefault();
        if(!flag){
          flag = true;
          $('.main-div').slideToggle( "slow", function() {
             flag = false;
          });
        }
        
    });
});

* {margin: 0px; box-sizing: border-box;}
.main-div {width: 80%; float: right; height: 200px; background: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="toggler">Toggle</button>
<div class="main-div"></div>