滚动事件触发多次，但我需要它每次滚动触发一次答案

【问题标题】：Scroll event fires multiple times but I need it to fire once per scroll滚动事件触发多次，但我需要它每次滚动触发一次
【发布时间】：2017-05-14 12:24:57
【问题描述】：

我想根据滚动方向调用一个函数，即如果我们向下滚动它调用 goDown()，如果我们向上滚动则调用 goUp()。
这是我的代码：

  $('.container').on('DOMMouseScroll mousewheel', function (e) {
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { 
      console.log('down');
      goDown();
    } else {
      console.log('up');
      goUp();
    }

    return false;
  });

但是如果我们滚动它会触发 goDown() 或 goUp() 多次，这不是我想要的，我只想每次滚动触发一次。

【问题讨论】：

看看here

标签： javascript jquery scroll

【解决方案1】：

使用 lodash 的 throttle。
在下面的示例中，1000 (1s) 是在没有任何调用 onScroll() 的情况下必须经过的时间才能再次触发它。

  $('.container').on(
    'DOMMouseScroll mousewheel', 
    _.throttle(
       onScroll, 
       1000, 
       {trailing: false}
    )
  );   
  
  // your original function, named:
  function onScroll (e) {
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { 
      console.log('scrolled down');
      // goDown();
    } else {
      console.log('scrolled up');
      // goUp();
    }

    return false;
  }

.container {
  height: 200vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

如果您想在等待期结束而不是开始时触发 onScroll()，请使用

{leading:false,trailing:true}

...作为选项（最后一个参数）。

另外请注意，有一个用于节流和去抖动的 jQuery 插件，但我从未使用过它。我所知道的是，它的语法/方法略有不同（与_ 相比）。如果您不想在项目中加载 Lodash，请随意查看。

【讨论】：

【解决方案2】：

你可以通过超时来完成。

这是我的单机

t=onscroll=e=>clearTimeout(t,t=setTimeout('console.log("finished")',500))

或者多写几行：

var scrollWait,
  scrollFinished = () => console.log('finished');
  window.onscroll = () => {
    clearTimeout(scrollWait);
    scrollWait = setTimeout(scrollFinished,500);
  }

此代码等待 500 毫秒然后触发完成。

您可以将其转化为您自己的情况。

【讨论】：

【解决方案3】：

我是这样解决问题的（请注意代码要优化）：

$(document).ready(function(){ 

  var valid = true;
  var power = 0; // <-- initial power

  setInterval(function(){
    if (power>0){
      power=power/2; // <-- decrease power every 250ms
      if (power<1) power=0;
      console.log(power); // <-- you may remove this
    }
  },250);

  $('.container').on('DOMMouseScroll mousewheel', function (e) {
    e.preventDefault();

    var c_power = Math.abs(e.originalEvent.wheelDeltaY)+Math.abs(e.originalEvent.wheelDeltaX); // <-- get current power

    /* event is considered valid only if current power > power */
    if (c_power>=power){
      power=c_power;
      valid=true;
    }

    if(valid && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) { 
      console.log('down');
      goDown();
    } else {
      console.log('up');
      goUp();
    }

    return false;
  });

});

【讨论】：