Code Explanation - Not sure how code actually works

1

I’m trying to detect when a scroll event ends and came across this code when searching for how to accomplish this. Where I confused at is the timeout function that runs after scroll has ended.

How does it detect the scroll event has ended, would the clearTimeout() method not continue to clear out the SetTimeout() even when scroll has ended?

var scrollStop = function (callback) {

      // Make sure a valid callback was provided
      if (!callback || typeof callback !== 'function') return;

     // Setup scrolling variable
     var isScrolling;

     // Listen for scroll events
     window.addEventListener('scroll', function (event) {

           // Clear our timeout throughout the scroll
	   window.clearTimeout(isScrolling);

	  // Set a timeout to run after scrolling ends
	  isScrolling = setTimeout(function() {

	      // Run the callback
	     callback();

	 }, 66);

   }, false);

};
2

without the clear timeout and settimeout, you will get the redundant call (there is technical of it I forget came a cross sometime ago). let say if you want to to show tooltip if user scroll back and force quickly many times without those timing you would see tooltip show like a blink LED light.

only the last event is executed after delay of 66ms. this another example.

# I use this code in my react app, to validate data while user typing in input box.
# I make it as function for reusability .
const makeDelay = () => { 
    let timer = null
    return (callback) => {
        clearTimeout(timer);
        timer = setTimeout(callback, 10);
    }
};
1 Like
3

Small typo in your example:

const makeDelay = () => {

should be:

const makeDelay = (callback) => {

4

How does it detect the scroll event has ended?
It doesn’t. It just runs code after you scroll.

Would the clearTimeout() method not continue to clear out the SetTimeout() even when scroll has ended?
Works like this…

You call:

scrollStop(custom_function_here). Your custom_function_here just happens to be called callback.

if (!callback || typeof callback !== ‘function’) return;
The if statement ensures it’s indeed a function.

var isScrolling;
isScrolling is given function scope and hoisted to top of function.

window.addEventListener(‘scroll’, function (event) {
eventlistener is added to entire window (specifically scroll)
whenever a user scrolls this evenlistener runs

window.clearTimeout(isScrolling);
first thing that happens when a user scrolls is removes any timeouts on the variable isScrolling

isScrolling = setTimeout(function() {
then it adds a new timeout to run your custom_function. Remember timeouts only run once.

The point of removing the timeout is so that when you scroll it doesn’t create hundreds of timeouts.

That’s it… Oh and it runs your custom function every 66 miliseconds (which gives the effect after you scroll).

2 Likes
5

It is not a typo. it is by design. I want to reuse this function so I call it like this.

const newDelay = makeDelay() // this return the inner function.;
// and then 
newDelay(callback);
6

Yeah it’s a closure. I haven’t come across a closure using a callback before.

1 Like