当前位置:  开发笔记 > 编程语言 > 正文

JavaScript函数-用wheel事件一次调用吗?

如何解决《JavaScript函数-用wheel事件一次调用吗?》经验,为你挑选了1个好方法。

该代码几乎可以正常工作,但是有一个小问题,那就是我希望得到您的帮助的地方。

目标:这个脚本的这个目标是调用parseScroll();函数一个用户车轮使用鼠标时的时间。

问题:代码最初有效。但是,如果在短距离内用手指在鼠标上多次滚动,parseScroll();则不会调用该函数。之所以这样做,是因为由于采用了防反弹算法来防止该函数被调用数千次,因此尚未意识到上一个轮子已经结束。

(更新):我发现这篇文章似乎可以解决我所寻找的问题。有人可以帮助我理解它并用纯JavaScript重新创建吗?http://demos111.mootools.net/鼠标轮

旁注:此问题特定于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。



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
  });
});
推荐阅读
放ch养奶牛
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有