防止Jquery.click切换函数因过度点击而反复运行

Preventing Jquery .click toggle function from running over and over with excess clicking

本文关键字：运行 click Jquery 函数 防止      更新时间：2024-04-28

我在jQuery中构建了一个.cacktoggle函数，就我的一生而言，我无法对它产生.stop式的效果，基本上我不希望它在mash点击时反复播放。

我想把它应用到函数中，这样它就自我包含了，这就是我坚持的地方。

JS小提琴链接

    (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>

点击似乎是很多人都会使用的东西，所以我认为在这里问它可能会很有用

通过向布尔变量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;});
  }
});

var clicked = false;
var doing = false;
$(".clickme").click(function(e) {
  if (doing) {
    return;
  } else {
    doing = true;
  }
  doing = true;
  clicked = !clicked;
  if (clicked) {
    $('.testsubject').fadeOut(700, function() {
        doing = false
    });
  } else {
        $('.testsubject').fadeIn(700, function() {
        doing = false;
    });
  }
});

这个例子是一个简单的切换，它只允许你在它不做任何事情时点击。我在IRC上解释过，但作为一个例子，该函数仅在doing设置为false时运行，而只有在fadeIn()或fadeOut的回调函数thingymaggier之后设置时才会运行。

相关文章：