JavaScript function -- call single time with wheel event?

Question

This code nearly works but has a slight problem which is where I'm hoping for your help.

The Goal: This goal of this script is to call the parseScroll(); function one time when the user wheels using the mouse.

The Problem: The code initially works. However, if you wheel with your finger on the mouse mutiple times within short proximilty, the parseScroll(); function isn't called. It does this because it hasn't realized that the previous wheel has ended since because of the debouncing algorithm in place to keep the function from being called a thousand times.

(Update): I found this article which seems to address what I'm looking for. Could someone help me understand it and recreate it in pure JavaScript? http://demos111.mootools.net/Mousewheel

Side Note: This question is specific to OS X but I would appreciate it if a windows user could tell me if it is doing what it is supposed to do in windows since I don't have a windows machine to test it with.

Here is a replica of the script that is giving me problems.

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };

  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      parseScroll(e);
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  });

  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}

Please wheel on your mouse and open your web inspector console to see resulting behavior.

Please ask questions in the comments and revisit the question as I may change the description as I find better ways to describe the problem.

I would like my solution to be in JavaScript.

Nahamas

Answer 1

The problem seems to be that debounce function, as you figured out. All you do is change the millisecond interval, and that should fix it.

NOTE: I took out the HTML and CSS to make things less cluttered. I also edited the JS a bit to make it shorter - hope that isn't a problem!

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      //parseScroll here
      console.log(e.deltaY)
      if (e.deltaY > 0) {
        console.log('scrolled down')
      }
      if (e.deltaY < 0) {
        console.log('scrolled up')
      }
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 50); //set this millisecond to your liking
  });
});

Zareba

Thank you :) I'm experimenting and comparing your answer. – Nahamas

This could technically work if you only needed to allow the user to "call" the function every couple seconds but in my situation, I'm hoping to have it more responsive than that. Thank you for your answer :) – Nahamas

This seems to give the behavior I'm after. It is very responsive but it doesn't call the code more than once when you "wheel". demos111.mootools.net/Mousewheel – Nahamas

Actually, strike that (sorry), I did further testing with shorter time intervals and it appears as though I'm able to get pretty accurate results with a 30 millisecond interval. So yes, you have figured out a roughly accurate solution. I will be on the lookout over the next little bit for anyone else who could post an answer with a more accurate result. – Nahamas

Answer 2

Edit, Updated

Try defining handler as named function, calling .removeEventListener after parseScroll called

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  
  function wheel(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      scrollStatus.functionCall = true;
      parseScroll(e); 
      window.removeEventListener("wheel", wheel, false)      
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  }

  var scrollTimer = false;
  window.addEventListener('wheel', wheel, false);

  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}

Please wheel on your mouse and open your web inspector console to see resulting behavior.

Ocean

Thank you for your answer. I think you misunderstood the question although it might be a miscommunication on my part. I don't want to destroy the function after one call. Rather, I want the function be be called a maximum of one time when the user "touches"/"wheels" the mouse with his/her finger. – Nahamas

@Nahamas Try substituting named function for anonymous function at wheel event handler, using .removeEventListener developer.mozilla.org/en-US/docs/Web/API/EventTarget/… ; see updated post. – Ocean

I think this is what I'm after except that I will want to readd the event listener after it is removed but I will experiment with that myself and see if I can get your code adapted to my situation. Thank you for your answer :) – Nahamas

@Nahamas Should be able to re-attach event using window.addEventListener("wheel", wheel) – Ocean

Just what I was thinking! I will further experiment with your answer. :) – Nahamas

Maybe we could also use e.preventDefault() or return false;? I'm not sure if that will work with a wheel event, but I'll try and see if I can somehow do that too :) – Nahamas

This seems to give the behavior I'm after. It is very responsive but it doesn't call the code more than once when you "wheel". demos111.mootools.net/Mousewheel If I could somehow view the Javascript code behind it; we could understand how they did it! – Nahamas