滚动之间0到1之间的值发生得太快

Question

基于mousewheel事件，我需要获取0到1之间的值。

我尝试过的示例工作，它给我0-1，但这太快了。我将如何放慢速度并可能使其惯性？

var r = 0
function onMouseWheel(e) {  

    e();
    r += e.deltaY / 500;
    r = clamp(0, 1, r);

    console.log('r is', r)
}

我得到的值在下面，但是在鼠标滚动时发生得太快了。

Answer 1

设为布尔值。仅当此布尔值为true时，才会打印控制台消息。打印消息时，布尔值设置为false，并且运行1000ms的计时器以在1秒后将布尔值设置回true。这样，您每秒只打印1次。

var i = 0;
var doOnScroll = true;
window.onload = function() {
  var scrollable = document.getElementById('scrollable');
  scrollable.onscroll = function() {
    if(doOnScroll) {
      console.log('scrolling:' + i);
      i++;
      doOnScroll = false;
      setTimeout(function(){
        doOnScroll = true;
      }, 1000);
    }
  };
};

.scrollable {
  overflow: scroll;
  height: 100px;
}

<div id="scrollable" class="scrollable">
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu pellentesque nibh. Sed eu condimentum ligula. Sed feugiat hendrerit tortor ac elementum. Fusce gravida dolor hendrerit, porttitor ligula non, aliquet augue. Etiam vulputate massa eleifend
    ex venenatis lobortis. Suspendisse vestibulum sit amet ipsum id efficitur. Nulla tempor neque elit, vel ultricies lorem placerat sed. Pellentesque sit amet nunc porttitor, placerat lorem id, vehicula metus. Aenean quam augue, dictum non nunc quis,
    condimentum molestie magna.
  </P>
  <P>
    Quisque in sem malesuada, condimentum sapien in, congue purus. Praesent sed luctus felis. Nunc interdum mi vitae euismod feugiat. Maecenas condimentum pharetra nulla sit amet suscipit. Cras et mattis enim. Fusce in dolor congue, pellentesque lectus non,
    scelerisque nulla. Nunc lobortis egestas aliquet. Pellentesque sit amet venenatis nisl. Maecenas sit amet quam ante. Praesent sed erat elit. Curabitur efficitur consequat enim, ac ultrices mauris blandit at. Vivamus a hendrerit turpis, quis tincidunt
    enim. Cras facilisis neque eu ipsum fermentum, dignissim posuere erat tempor. Donec elementum porta tortor quis euismod. Praesent laoreet tristique sollicitudin.
    <P>
    </P>
    Mauris fermentum, mi at feugiat viverra, ligula ante lobortis nibh, id eleifend est ipsum non sem. Nulla a est turpis. Mauris ullamcorper tempus tortor, sit amet faucibus ex ornare ac. Vivamus rhoncus urna velit, sit amet mattis ligula cursus in. Donec
    interdum vehicula lacinia. Nulla facilisis feugiat risus pulvinar porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer efficitur risus vel neque facilisis vestibulum. Ut molestie vestibulum
    mauris, bibendum feugiat massa scelerisque id. Nunc quis magna congue, condimentum arcu quis, eleifend est.
  </P>
</div>