主页 / 问题 / 716689
Accepted
Артём PeGaS
Asked:2020-09-10 22:52:09 +0000 UTC2020-09-10 22:52:09 +0000 UTC

如何设置应用事件的可能性之间的间隔？

  • 772

如何设置应用事件的可能性之间的间隔？比如这样点击一个div后，下一次点击只能在3秒后重复 https://jsfiddle.net/nnj4m728/1/

$('div').click(function(){
	alert(665);
});
div {
 height: 200px;
 background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

javascript

1 个回答

  1. Best Answer

    您可以设置一个布尔标志来指示可点击性。之后，我们绑定一次点击禁止第二次点击，延迟后我们setTimeout()返回这个机会：

    $('div').each(function() {
  var clickable = true; // флаг
  $(this).on('click', function() {
    if (clickable) { // если кликабельно
      clickable = false; // запрещаем клик
      alert('665'); // ваш код для выполнения по клику
      setTimeout(function() { // запускаем таймаут
        clickable = true; // возвращаем кликабельность
      }, 3000); // задержка в миллисекундах
    }
  });
});
    div {
  height: 200px;
  background: #000;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

    选项#2：通过类的存在/不存在来确定可点击性。实现实际上与使用标志相同：

    $('div').on('click', function() {
  var div = $(this);
  if (!div.hasClass('disabled')) { // если не заблокировано
    div.addClass('disabled'); // запрещаем клик
    alert('665'); // ваш код для выполнения по клику
    setTimeout(function() { // запускаем таймаут
      div.removeClass('disabled'); // возвращаем кликабельность
    }, 3000); // задержка в миллисекундах
  }
});
    div {
  height: 200px;
  background: #000;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

    选项#3：通过 CSS 阻止点击pointer-events:none：

    $('div').on('click', function() {
  var div = $(this);
  div.addClass('disabled'); // запрещаем клик
  alert('665'); // ваш код для выполнения по клику
  setTimeout(function() { // запускаем таймаут
    div.removeClass('disabled'); // возвращаем кликабельность
  }, 3000); // задержка в миллисекундах
});
    div {
  height: 200px;
  background: #000;
}

div.disabled {
  pointer-events: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

    • 5

相关问题