How do you call a wheel function every few wheel ticks or every few seconds?

Question

I'm new to JavaScript and managed to make this wheel event but it keeps triggering which will get me on a different element and scroll past the next one since I'm using nextElementSibling.

I've tried throttling it but haven't been successful so far as I'm not good enough at JS yet and want to learn more.

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')
  }
}

So the result should toggle .swap as soon as the function was triggered at least 2s ago or triggered 3-4 times. That is what I expect but maybe you might have even a better solution for me? It would be awesome! Thanks a lot for Your help! :)

Store the delta outside of `findScrollDirectionOtherBrowsers` (if this works try to implement it with a [closure](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work)) and only "scroll" to the next element when the delta is big enough. Or count how often the function has been called. — Andreas, Nov 06 '19 at 16:16

score 0 · Answer 1 · answered Nov 07 '19 at 11:04

I just added a counter to make it happen. Works fine so far.

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')
  }
}

How do you call a wheel function every few wheel ticks or every few seconds?

1 Answers1