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>

降低事件触发的频率

1 个答案: