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.

score 6 · Accepted Answer · answered Dec 09 '15 at 04:24

6

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

answered Dec 09 '15 at 04:24

ӍѲꝆΛҐӍΛПҒЦꝆ

193
1
9

Thank you :) I'm experimenting and comparing your answer. – www139 Dec 09 '15 at 04:31
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 :) – www139 Dec 09 '15 at 05:23
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". http://demos111.mootools.net/Mousewheel – www139 Dec 09 '15 at 05:26
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. – www139 Dec 09 '15 at 05:31

guest271314 · Answer 2 · 2015-12-09T04:31:49.983

1

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.

edited Dec 09 '15 at 04:31

answered Dec 09 '15 at 04:29

guest271314

1
15
104
177

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. – www139 Dec 09 '15 at 04:31
@www139 Try substituting named function for anonymous function at `wheel` event handler, using `.removeEventListener` https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener ; see updated post. – guest271314 Dec 09 '15 at 04:37
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 :) – www139 Dec 09 '15 at 04:38
@www139 Should be able to re-attach event using `window.addEventListener("wheel", wheel)` – guest271314 Dec 09 '15 at 04:40
Just what I was thinking! I will further experiment with your answer. :) – www139 Dec 09 '15 at 04:45
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 :) – www139 Dec 09 '15 at 04:48
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". http://demos111.mootools.net/Mousewheel If I could somehow view the Javascript code behind it; we could understand how they did it! – www139 Dec 09 '15 at 05:26

JavaScript function -- call single time with wheel event?

2 Answers2