降低事件触发的频率

Question

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

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

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

$("#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

要实现此目的，您可以使用超时来去抖动滚动计数器，这样它每滚动500ms只会触发一次。试试这个：

$("#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>