Уменьшите частоту, с которой может запускаться событие - PullRequest
Новая
       36

Уменьшите частоту, с которой может запускаться событие

1 голос
/ 28 марта 2019

Я написал скрипт 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>

1 Ответ

1 голос
/ 28 марта 2019

Чтобы достичь этого, вы можете использовать тайм-аут, чтобы отменить счетчик прокрутки, чтобы он срабатывал только один раз за каждые 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>
...