JavaScript函数——调用带有轮子的单次事件

Question

这段代码几乎可以工作，但有一个小问题，我希望你能帮我。

目标： 此脚本的目标是在用户使用鼠标滚动时调用parseScroll();函数一次。

问题： 代码最初工作。然而，如果你在短时间内多次用手指在鼠标上滚动，则不调用CCD_ 2函数。它这样做是因为还没有意识到上一个轮子已经结束，因为适当的去抖动算法，以防止函数被调用千次。

（更新）：我找到了这篇文章，它似乎解决了我想要的问题。有人能帮我理解它并用纯JavaScript重新创建它吗？http://demos111.mootools.net/Mousewheel

旁注： 这个问题是OS X特有的，但我很感激如果windows用户能告诉我它是否在做它应该做的事情在windows中做，因为我没有windows机器来测试它。

这是一个给我带来问题的脚本副本。

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      parseScroll(e);
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  });
  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}

Please wheel on your mouse and open your web inspector console to see resulting behavior.

请在评论中提问，并重新审视问题，因为我可能会在找到更好的方法来描述问题时更改描述。

我希望我的解决方案是JavaScript。

Answer 1

正如您所发现的，问题似乎是去抖动函数。你所做的只是改变毫秒间隔，这应该会解决它

注意：我去掉了HTML和CSS，以减少混乱。我还对JS进行了一些编辑，使其更短——希望这不是问题！

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      //parseScroll here
      console.log(e.deltaY)
      if (e.deltaY > 0) {
        console.log('scrolled down')
      }
      if (e.deltaY < 0) {
        console.log('scrolled up')
      }
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 50); //set this millisecond to your liking
  });
});

Answer 2

编辑、更新

尝试将处理程序定义为命名函数，在调用parseScroll之后调用.removeEventListener

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  
  function wheel(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      scrollStatus.functionCall = true;
      parseScroll(e); 
      window.removeEventListener("wheel", wheel, false)      
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  }
  var scrollTimer = false;
  window.addEventListener('wheel', wheel, false);
  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}

Please wheel on your mouse and open your web inspector console to see resulting behavior.