javascript - 使用滚轮事件调用在数组中选择新变量的函数

Question

我已向 HTML 元素添加了一个滚轮事件监听器。我的数组中有 4 个变量。现在，我的目标是，每当用户在添加事件监听器的对象上滚动鼠标滚轮/触摸板时，都应该选择下一个变量。

比如我的数组是这样的[苹果，橙子，木瓜， Guava ]。我想创建一些东西，在车轮运动时选择苹果，然后在下一个车轮运动时选择橙色，然后在下一个车轮运动时选择木瓜，依此类推。

同样的工作方向相反(从 Guava 到木瓜，每次用户滚动鼠标滚轮或向上滚动触摸板时进行安排)

我面临的问题是这两个问题:

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

对我来说，“轮子”事件运行良好。您还有其他的轮子监听器吗？

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