Использование события wheel для вызова функции, которая выбирает новые переменные в массиве

Question

Я добавил слушатель событий wheel в элемент HTML.В моем массиве есть 4 переменные.Теперь моя цель состоит в том, чтобы всякий раз, когда пользователь катит свое колесо мыши / тачпад на объекте, куда добавляется прослушиватель событий, должна выбираться следующая переменная.

Например, мой массив выглядит так [apple,апельсин, папайя, гуава].Я хочу создать что-то, что выберет яблоко при движении колеса, затем оранжевый при следующем движении колеса, затем папайю при следующем движении колеса и т. Д.

И та же самая работа в противоположном направлении (от гуавы до папайи, чтобы организоватькаждый раз, когда пользователь поворачивает колесо мыши или прокручивает сенсорную панель)

Проблема, с которой я сталкиваюсь, состоит в следующем:

1. колесо мыши срабатывает слишком много раз и вызываетфункция (черт возьми) слишком много раз.Даже если я напишу функцию для итерации массива в указанном мной порядке.Функция, вызываемая так много раз, будет случайным образом.

2. Я даже не уверен, как написать функцию, вызывающую такую ​​итерацию в массиве.Это не моя основная проблема, на данный момент.

   var controller = document.querySelector(".main");
   var apple = document.querySelector(".box");
   var orange = document.querySelector(".box1");
   var papaya = document.querySelector(".box2");
   var guava = document.querySelector(".box3");
   var boxes = [apple,orange,papaya,guava];
   
   controller.addEventListener('wheel', damnIt);
   
   function damnIt(){
       console.log ("hey");
       //my function for array selection goes here
   }
   

Answer 1

Вы должны использовать дросселирование.В интернете много статей на эту тему.Например https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Answer 2

Для меня событие «колесо» работает нормально. Могут ли у вас быть другие слушатели колеса?

document.addEventListener('wheel', function() {
  console.log('Hi');
}.bind(this));

Answer 3

Путь тротта (вызов не чаще, чем раз в 150 мс):

var controller = document.querySelector(".main");
var apple = document.querySelector(".box");
var orange = document.querySelector(".box1");
var papaya = document.querySelector(".box2");
var guava = document.querySelector(".box3");
var boxes = [apple,orange,papaya,guava];

controller.addEventListener('wheel', throttle(damnIt, 150));

function damnIt() {
  console.log ("hey");

    //my function for array selection goes here
}

function throttle(cb, timeout) {
  // You can rewrite this function by replacing the time limit with the
  // scroll pitch. I think that would be the best solution.
  // let delta = e.deltaY || e.detail || e.wheelDelta;
  // ... sum delta and call callback by the number of steps: accumulator/step

  let lastCall = 0;

  return function() {
    if (new Date() - lastCall > timeout) {
      lastCall = new Date();

      cb();
    }
  }
}