Javascript 使用jquery阻止绑定在div上的连续单击

我正在玩滑块脚本。在脚本中，左箭头和右箭头包装在一个div中，单击事件绑定在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>

&伊萨库；
&rsaquo；

将jQuery中的函数与函数结合使用

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);

将jQuery中的函数与函数结合使用

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);

---

像这样的怎么样：

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;
    });
  }
}

---

像这样的怎么样：

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;
    });
  }
}

---

一种可能的解决方案是使用标志变量

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);
        }
    });
})();

---

一种可能的解决方案是使用标志变量

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);
        }
    });
})();

---

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

在click事件上，删除事件侦听器，然后使用

setTimeout

重新设置

使用全局变量存储当前时间和时间 检查当用户单击您的 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;
  }
});

---

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

在click事件上，删除事件侦听器，然后使用

setTimeout

重新设置

使用全局变量存储当前时间和时间 检查当用户单击您的 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;
  }
});

---

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

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上解除click事件的绑定，并在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);
}

---

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

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

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上解除click事件的绑定，并在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);
}

---

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

谢谢。作为第一个到达的答案被接受。谢谢。作为第一个到达的答案被接受。谢谢你的回答。我确实用了你的方法，但第一个到达的工作解决方案不是这个。谢谢你的回答。我确实用了你的方法，但第一个到达的工作解决方案不是这个。