Question

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

为了防止事件处理程序在行中多次触发并跳过页面，我添加了一个计时器，计算存储在变量中的date.now()与eventHandler中date.now()之间的差异。这种情况主要发生在垃圾邮件滚动时，它需要等待大约3秒才能再次滚动而不是200毫秒。如何防止这种情况发生？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

看起来你想要的是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

Eventhandler的禁用时间超过预期

1 个答案: