防止使用 jquery 绑定在 div 上的连续点击答案

【问题标题】：Prevent successive clicks binded on a div with jquery防止使用 jquery 绑定在 div 上的连续点击
【发布时间】：2014-05-27 13:49:14
【问题描述】：

我正在玩一个滑块脚本。在脚本中，左右箭头包裹在一个 div 中，并且 click 事件绑定在该 div 上。它没有问题，但是当它点击 div 时我需要的是，我需要防止连续点击两秒钟。然后它应该可以再次点击。我会很感激任何建议。

$container.find('.laos-slider-controls').bind('click',function(){
  var target = $(this).attr('data-target');
  if(target!='next'&&target!='prev') target=parseInt(target);
  changeSlides(target);
});

HTML 是：

<div class="laos-slider-controls-wrapper">
  <div class="laos-slider-controls" data-target="prev">&lsaquo;</div>
  <div class="laos-slider-controls" data-target="next">&rsaquo;</div>
  <ul class="laos-slider-pagers"></ul>
</div>

【问题讨论】：

标签： javascript jquery javascript-events event-handling

【解决方案1】：

一种可能的解决方案是使用标志变量isClickable 和超时在特定时间后重置此标志变量。

(function () {
    var isClickable = true;

    $container.find('.laos-slider-controls').bind('click',function(){
        if (isClickable) {
            var target = $(this).attr('data-target');
            if(target!='next'&&target!='prev') target=parseInt(target);
            changeSlides(target);

            isClickable = false;

            setTimeout(function () {
                isClickable = true;
            }, 2000);
        }
    });
})();

【讨论】：

谢谢。接受为第一个到达的答案。

【解决方案2】：

结合setTimeout函数在jQuery中使用unbind函数

function SliderClickEvent(){
 var target = $(this).attr('data-target');
 if(target!='next'&&target!='prev') target=parseInt(target);
 changeSlides(target);

 //unbind the event
 $container.find('.laos-slider-controls').unbind('click');

 //Do a timeout and rebind the event
 setTimeout(function() {
            $container.find('.laos-slider-controls').bind('click',SliderClickEvent);
        }, 2000);
}

$container.find('.laos-slider-controls').bind('click',SliderClickEvent);

【讨论】：

【解决方案3】：

这样的事情怎么样：

var timeout;
var changeTheSlides = true;
$container.find('.laos-slider-controls').bind('click',function(){
  if(changeTheSlides) {
    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    timeout = setTimeout(function() {
        changeTheSlides = false;
    }, 2000); // 2sek timeout
    },
    function () {
      clearTimeout(timeout);
      changeTheSlides = true;
    });
  }
}

【讨论】：

感谢您的回答。我确实使用了你的方式，但第一个到达的工作解决方案不是这个。

【解决方案4】：

想到两个选项，都使用超时。

1) 您可以创建一个变量来充当标志，将其设置为单击时尝试，然后使用 setTimeout() 将其设置回 false。然后，在您的函数中，检查该标志，如果为 true，则返回 false，因此您的点击甚至不会真正发生。

var clickFlag = false;

$container.find('.laos-slider-controls').bind('click',function(){
    if (clickFlag) {
        return false;
    }

    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    clickFlag = true;
    setTimeout(function() { clickFlag = false; }, 2000);
});

2) 你可以做类似的事情，只是你不使用标志，而是取消绑定 DIV 上的点击事件，并在 2 秒超时时重新绑定它。

function BindSliderClick() {
    $container.find('.laos-slider-controls').bind('click', SliderClick);
}

function SliderClick(){
    var target = $(this).attr('data-target');
    if(target!='next'&&target!='prev') target=parseInt(target);
    changeSlides(target);

    $('.laos-slider-controls').unbind('click');
    setTimeout(BindSliderClick, 2000);
}

就个人而言，我可能会推荐第一个选项。

【讨论】：

【解决方案5】：

我认为您可以使用两种不同的技术：

在点击事件上，移除事件监听器，然后使用setTimeout 重新设置。
使用全局变量存储当前时间和当用户点击你的时，检查是否在不到 s 之前发生 div

解决方案#1 的问题在于，如果您的用户点击次数很多，那么在性能方面会变得非常难看。另外，如果他一直点击，每次都会重置计时器，他再也看不到下一张幻灯片了。我认为解决方案＃2是更好的解决方案。你可以像这样实现它：

var time = 0;
var newTime;
$container.find('.laos-slider-controls').bind('click',function(){
  newTime = new Date().getTime(); // current time in ms !
  if (newTime - time >= 2000){
      var target = $(this).attr('data-target');
      if(target!='next'&&target!='prev') target=parseInt(target);
      changeSlides(target);
      time = newTime;
  }
});

【讨论】：