2

How can I make the mousewheel function fire one time only instead of hunderds of times(multiple of times) when the user scrolls.

Here is my work so far,

$(window).bind('mousewheel', function(event) {
console.log("fire")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://cdn.dribbble.com/users/77760/screenshots/2042501/attachments/363345/potato-4.jpg"></image>

4 Answers4

3

I find logic of detecting ending of scroll from here if scroll not heppend for 250ms then it will take as end of scroll

var i = 0;
$(window).bind('mousewheel', function(event) {
if(i==0){
console.log("fist time")
i++;
}
clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
        i = 0;
    }, 250));
    
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div></div>
    <image src="https://cdn.dribbble.com/users/77760/screenshots/2042501/attachments/363345/potato-4.jpg"></image>
Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
0

You are going to want to throttle the scroll event to make sure it doesn't keep firing. Here is an example throttle function:

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

You're only allowing the scroll event to fire every x milliseconds. Where limit sets the time in milliseconds to wait before allowing the event to fire again. There are also libraries that provide this sort of functionality such as lodash and RxJs

A useful link: http://underscorejs.org/#throttle

Throttle function taken from: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Jakub Kawalec
  • 69
  • 4
0

You could set the eventListener and remove it as soon as its gets triggered, something like this:

$(window).on("mousewheel", function(e){
  console.log("only alerting once");
  $(window).unbind("mousewheel");
});
Fecosos
  • 944
  • 7
  • 17
-1

You could define a variable to hold the value if the user has scrolled or not, set it to false, then once the user scrolls, set it to true.

Also note, As of jQuery 3.0, .bind() has been deprecated. It is best practice now to use .on() instead.

.on() has been the go to method for attaching event handlers to a document since jquery version 1.7

 var scrolled = false;
    $(window).on('mousewheel', function(event) {
     if(scrolled === false) { 
        console.log('fire');
        scrolled = true;
     }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://cdn.dribbble.com/users/77760/screenshots/2042501/attachments/363345/potato-4.jpg"></image>
schmitty890
  • 175
  • 2
  • 7
  • it fire only one time. if I scroll again it does not work at all –  Apr 28 '18 at 02:13
  • @mozs your original post says How can I make the mousewheel function fire one time only instead of hunderds of times. It only fires one time, so it is working as expected. – schmitty890 Apr 28 '18 at 02:15
  • .on() doesn't make it fire one time, it makes it fire every time. .one() makes it fire one time. See my answer. – nixkuroi Apr 28 '18 at 02:46
  • @nixkuroi .on binds the event handler to the element. the reason this fires once is because we set a boolean value called scrolled, originally set to false, then once the the mousewheel event happens, scrolled is set to true. .one() makes the event only occur once. This has the same outcome. There are many ways to solve problems in javascript and jquery. – schmitty890 Apr 28 '18 at 03:01
  • True, you can solve the problem multiple ways, but why introduce a new variable and three extra lines of code when there is a function built into jquery that does exactly the same thing? – nixkuroi Apr 28 '18 at 03:10
  • This is true, and it looks like the OP wanted a solution that reset after the user stopped scrolling, as seen in @Developer kt 's example . which wasnt as clear until the OP started commenting in our comments. lol. I've rarely used .one(), but in this case it would make more sense. – schmitty890 Apr 28 '18 at 03:18