Question

我正在玩滑块脚本。在脚本中，左右箭头包含在div中的div和click事件中。它没有问题，但是当它点击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>

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

Answer 2

将jQuery中的unbind函数与setTimeout函数

结合使用

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

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

Answer 4

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

在click事件中，删除事件侦听器，然后使用setTimeout 再次设置它。
使用全局变量存储当前时间和当用户点击你的时间时检查是否发生了不到一次格

解决方案＃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;
  }
});

Answer 5

我们会想到两个选项，都是使用超时。

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

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

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

5 个答案: