JavaScript 函数 -- 用轮子事件调用单次？

Question

此代码几乎可以工作，但有一个小问题，我希望得到您的帮助。

The Goal: This goal of this script is to call the parseScroll(); function one time when the user wheels using the mouse.

The Problem: The code initially works. However, if you wheel with your finger on the mouse mutiple times within short proximilty, the parseScroll(); function isn't called. It does this because it hasn't realized that the previous wheel has ended since because of the debouncing algorithm in place to keep the function from being called a thousand times.

(Update): I found this article which seems to address what I'm looking for. Could someone help me understand it and recreate it in pure JavaScript? http://demos111.mootools.net/Mousewheel

Side Note: This question is specific to OS X but I would appreciate it if a windows user could tell me if it is doing what it is supposed to do in windows since I don't have a windows machine to test it with.

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

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.

JavaScript 函数 -- 用轮子事件调用单次？

JavaScript function -- call single time with wheel event?

javascript

macos

scrollwheel

mousewheel