javascript - 禁用事件处理程序的时间超过预期的时间

我正在制作一个简单的全视口滚动条。您可以通过触发wheel事件来更改部分。

为了防止事件处理程序在行中多次触发并跳过页面，我添加了一个计时器，计算存储在变量中的date.now()和eventHandler内部的date.now()之间的差。大多数情况下，如果您滚动垃圾邮件，就会发生这种情况，这使得您必须等待大约3秒钟才能再次滚动，而不是200ms。如何防止这种情况发生？

document.ready = (fn) => {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}


document.ready(() => {

  const SECTIONS = document.querySelectorAll('.section');
  let current;
  let onWheelTimeout = 'poop';
  let time = Date.now()

    // initialize first section as active
    _.first(SECTIONS).classList.add('active');

    document.addEventListener('wheel', onWheel)




  function goSectionUp() {
    const current = document.querySelector('.active');
    current.classList.remove('active');

    if(current.previousElementSibling) {
      current.previousElementSibling.classList.add('active');
    } else {
      _.last(SECTIONS).classList.add('active');
    }
  }

  function goSectionDown() {
    const current = document.querySelector('.active');
    current.classList.remove('active');

    if(current.nextElementSibling) {
      current.nextElementSibling.classList.add('active');
    } else {
      _.first(SECTIONS).classList.add('active');
    }
  }



  function onWheel(e) {
    const now = Date.now()
    const diff = now - time;
    time = now;
    if(diff > 200) {
      if(e.deltaY < 0) {
        onScroll('up')
      } else {
        onScroll('down')
      }
    }
  }

  function onScroll(direction) {
    if(direction === 'up') {
      goSectionUp()
    } else {
      goSectionDown()
    }
  };

});

html {
box-sizing: border-box;
overflow: hidden;
width: 100%; height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
padding: 0; margin: 0;
overflow: hidden;
height: 100%; width: 100%;
position: relative;
}



#page {
  width: 100%; height: 100%;
  transition: all 1s ease;
  transform: none !important;
}

.section {
  height: 100vh; width: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .7s ease-in-out;
}
.section:nth-of-type(1) {
  background-color: red;
}
.section:nth-of-type(2) {
  background-color: aquamarine;
}
.section:nth-of-type(3) {
  background-color: blueviolet;
}
.section:nth-of-type(4) {}

.active {
  opacity: 1; visibility: visible;
}


#button {
  position: sticky;
  top: 0; left: 100px;
  z-index: 1000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="page">
  <div class="section">one</div>
  <div class="section">two</div>
  <div class="section">three</div>
  <div class="section">four</div>
</div>

最佳答案

似乎您想要的是debounce函数。我建议使用David Walsh的这个：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

用法

var myScrollFunction = debounce(function() {
    // All the taxing stuff you do
}, 250);

document.addEventListener('wheel', myScrollFunction);

回答为什么您的代码无法按预期工作：鼠标滚轮在滚动时会产生一系列连续事件，因此您的时间差始终小于200。这是“适当”工作的示例（尽管最佳答案是仍然是如上所述的真正的反跳功能）。

JSBin示例
https://jsbin.com/cuqacideto/edit?html,console,output

关于javascript - 禁用事件处理程序的时间超过预期的时间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49410776/