防止Jquery .click切换功能通过多余点击反复运行

时间:2016-04-12 01:46:45

标签: javascript jquery html

我在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>

切换.click似乎很多人都会使用,所以我认为在这里提问可能会有用

2 个答案:

答案 0 :(得分:1)

通过向布尔变量fadeInProgress添加检查,您可以选择仅在fadeInProgressfalse时对动画进行排队。然后它将值设置为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;});
  }
});

答案 1 :(得分:0)

    $(function () {    
        $('form').on('submit', function (e) {    
          e.preventDefault();//prevent default submit
         var df = $('#df').val();
         //other codes
         $.getJSON('000797vol400piedata.php', {
             df: df//Here we have our submitted data
          }, function(json) {
              options.series[0].data = JSON.parse(json);
              chart = new Highcharts.Chart(options);    
         //other codes
         });
     });
});

此示例是一个简单的切换,只允许您在不执行任何操作时单击。我在IRC上进行了解释,但作为一个例子,该函数仅在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; }); } }); 设置为false时运行,只有当它在doingfadeIn()的回调函数thingymajigger之后设置时才会运行。