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＆＃39; s 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; }之前必须通过的时间。

＆＃13;

.container {
  height: 200vh;
}

＆＃13;

<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>

＆＃13;

onScroll()

＆＃13;

如果你想在等待期结束时解雇{leading:false,trailing:true}，而不是在开始时，请使用

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

另请注意，有一个用于节流和去抖的jQuery插件，但我从未使用它。我所知道的是它的语法/方法略有不同（比var clustRed = L.markerClusterGroup({pane:'hilevel'}); var clustYellow = L.markerClusterGroup({pane:'lowlevel'});）。如果您不想在项目中加载Lodash，请随时查看。

Answer 2

你可以暂停。

这是我的oneliner

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毫秒然后火完成。

您可以根据自己的情况进行翻译。

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

});

滚动事件多次触发，但每次滚动需要触发一次

3 个答案: