Question

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

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

问题： 代码最初有效。但是，如果您在短时间内用手指轻轻敲击鼠标，   不调用parseScroll();函数。这样做是因为它   没有意识到之前的车轮因为车轮已经结束了   debouncing算法到位以防止函数被调用   一千次。

（更新）：我发现这篇文章似乎解决了我正在寻找的问题。有人可以帮助我理解它并在纯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

修改，更新

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript函数 - 用wheel事件调用单次时间？

2 个答案: