降低事件触发的频率

Question

我写了一个 jQuery 脚本，当滚轮被激活时，它会在一个元素上滚动 in/out。

不幸的是，滚动本身很慢，所以如果用户多次滚动鼠标滚轮，那么积压的滚动可能需要很长时间才能赶上。我想设置它，以便在捕获的每个滚动之间有半秒的延迟，下一个滚动只能在半秒过去后触发，在此期间任何额外的滚动都应该被忽略。

在下面的脚本中，如果有人一直在框上滚动，我只希望计数器每半秒增加一次，而不管他们滚动的速度有多快。我不知道如何做到这一点，所以任何帮助将不胜感激。谢谢！

$("#boxScroll").bind('mousewheel', function() {
  var countPastScrolls = parseInt($("#countScrolls").text(),10)
  $("#countScrolls").text(countPastScrolls+1)
})

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<DIV class="box" id="boxScroll"></DIV>
Count of scrolls: <DIV id="countScrolls">0</DIV>

Answer 1

为此，您可以使用超时来消除滚动计数器的抖动，使其每滚动 500 毫秒仅触发一次。试试这个：

$("#boxScroll").on('mousewheel', function() {
  var $box = $(this);

  if (!$box.data('disable-count')) {
    $box.data('disable-count', true)
    $("#countScrolls").text(function(i, t) {
      return parseInt(t, 10) + 1;
    });

    setTimeout(function() {
      $box.data('disable-count', false);
    }, 500);
  }
})

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box" id="boxScroll"></div>
Count of scrolls:
<div id="countScrolls">0</div>

降低事件触发的频率

Reduce the frequency over which an event can trigger

jquery

events

scroll

delay

intervals