javascript - 防止 Jquery .click 切换功能因过度点击而反复运行

Question

我正在 jQuery 中构建一个 .clicktoggle 函数，但在我的一生中，我无法在其上获得类似 .stop 的效果，基本上我不希望它在点击 mash 时一遍又一遍地播放。

我希望它能够应用到函数中，这样它就可以自包含了，这就是我陷入困境的地方。

JS fiddle link

    (function($) {
  $.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc + 1) % 2;
    });
    return this;
  };
}(jQuery));

$('div').clickToggle(function() {
  $('.testsubject').fadeOut(500);
}, function() {
  $('.testsubject').fadeIn(500);
});

<小时/>

    <div class="clickme">click me fast</div>
<div class="testsubject">how do i stop it playing over and over if you click alot</div>

Toggle .click 似乎很多人都会使用，所以我认为在这里询问可能会有用

Answer 1

通过向 bool 变量 fadeInProgress 添加检查，您可以选择仅在 fadeInProgress 为 false 时对动画进行排队。然后，它将值设置为 true 并执行动画。动画完成后，将值设置为 false。

var fadeInProgress = false;
$('div').clickToggle(function() {
  if (!fadeInProgress) {
    fadeInProgress = true;
    $('.testsubject').fadeOut(700, function(){fadeInProgress = false;});
  }
}, function() {
  if (!fadeInProgress) {
    fadeInProgress = true;
    $('.testsubject').fadeIn(700, function(){fadeInProgress = false;});
  }
});