CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7927930
user7927930

Reputation:

mouse wheel firing more than one time

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>

Upvotes: 2

Views: 1871

Answers (4)

Kamalesh M. Talaviya
Kamalesh M. Talaviya

Reputation: 1420

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>

Upvotes: 3

Fecosos
Fecosos

Reputation: 974

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

Upvotes: 0

Jakub Kawalec
Jakub Kawalec

Reputation: 69

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

Upvotes: 0

schmitty890
schmitty890

Reputation: 175

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>

Upvotes: -1

Related Questions