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.

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

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.