如何在 vanilla javascript 中正确使用滚动事件监听器？

Question

How can I improve the code below?

I wish to use only one function to execute my code with the scroll event. I have something like this:

function scrollMenu() {
 window.addEventListener("scroll", () => {
   // do stuff
 });
}
function scrollhabilities() {
 let cont = 0;
 window.addEventListener("scroll", () => {
   // do stuff
   };
 });
}

This works, but I tried to improve the code to be less repetative, however it doesn't work:

const scrollmenu = () =>{}
const scrollhabilities = () =>{}

function scrollThings() {
  window.addEventListener("scroll", () => {
    scrollmenu();
    scrollhabilities():   
  });
}

Answer 1

Maybe this helps you to get a starting point. (you can obviously remove the event parameter if you never need it inside the function)

 var scrollmenu = function(scrollEvent) { console.log('scrollmenu', window.scrollY) }; var scrollhabilities = function(scrollEvent){ console.log('scrollhabilities', window.scrollY) }; var scrollThings = function () { window.addEventListener("scroll", event => { scrollmenu(event); scrollhabilities(event); }); }();

 div.scroll { background-color: orange; height: 1000px; width: 400px; }

 <div class="scroll">move your cursor here and scroll up and down</div>

Answer 2

You might need a debounce function. Debouncing allows your function to fire only once in the specified period of time (500ms in the below example).

Without this function, scrolling the window will fire thousands of times during a continuous scroll. With this function, it will fire only once. As soon as the user pauses for the specified period of time (eg. 500ms), the function will fire. (I set the timeout to 500ms to ensure the effect is seen - usually you would not specify such a large number - perhaps 100ms or less might be better.)

Note that there is a companion function called "throttle" that is slightly different.

 var cnt = 0; const msg = document.getElementById('msg'); window.addEventListener("scroll", () => { handleScroll(); }); const handleScroll = debounce(() => { cnt++; msg.innerText = cnt; },500); 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); }; };

 body{height:3000px;} #msg{ position:fixed; top:20px; right:2px; padding:2vh 5vw; font-size:5rem; background:wheat; border:1px solid orange; }

 <div id="msg"></div>

References:

https://davidwalsh.name/javascript-debounce-function

this comment explains throttle

https://css-tricks.com/debouncing-throttling-explained-examples/