javascript - 你如何每隔几个轮子滴答声或每隔几秒调用一个轮子函数？

Question

我是 JavaScript 的新手并成功地完成了这个滚轮事件，但它一直在触发，这将使我进入不同的元素并滚动到下一个元素，因为我正在使用 nextElementSibling .

我尝试过限制它，但到目前为止还没有成功，因为我对 JS 还不够好，想了解更多。

var scrollableElement = document.querySelector('body');

scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

function findScrollDirectionOtherBrowsers(event) {
  var delta;
  var aktiv = document.querySelector('.swap');

  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  if (delta < 0) {
    aktiv.nextElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  } else if (delta > 0) {
    aktiv.previousElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
}

因此，只要函数至少在 2 秒前被触发或被触发 3-4 次，结果应该立即切换 .swap。那是我所期望的，但也许您可以为我提供更好的解决方案？这一定非常棒!非常感谢你的帮助! :)

Answer 1

我只是添加了一个计数器来实现它。到目前为止工作正常。

var scrollableElement = document.querySelector('body');
//new
var i = 0;

scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

function findScrollDirectionOtherBrowsers(event) {
  var delta;
  var aktiv = document.querySelector('.swap');

  if (event.wheelDelta) {
    delta = event.wheelDelta;
    //new
    i++;
  } else {
    delta = -1 * event.deltaY;
  }
  //new && i > 15 and set back to 0
  if (delta < 0 && i > 15) {
    i = 0;
    aktiv.nextElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  //new && i > 15 and set back to 0
  } else if (delta > 0 && i > 15) {
    i = 0;
    aktiv.previousElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
}