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

Question

我想根据滚动方向调用一个函数，即如果我们向下滚动，则调用 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() ，这不是我想要的，我只想每次滚动触发一次。

Answer 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，请随意查看它。