delay on the mousewheel event

Question

I encountered this problem that I have no idea how to search for it or explain it. I'm trying to do add classes using mousewheel event. I wrote this JS code

`

var count = 1;
$(document).ready(function(){
    $(window).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
           $('li.'+count).addClass("show").siblings().removeClass("show");
            count = count - 1;
            if (count == 0) {
            count = 6;
          }


        }
        else{
          $('li.'+count).addClass("show").siblings().removeClass("show");
          count++;
          if (count == 6) {
            count = 0;
          }

        }


    });});`

Since im looping into 5 list elements, I did those conditions ... pretty primitive code, but did the job.

The html

<ul class="list-unstyled">
            <li class="1 show" >
            <div class="row">
                <div class=" col-md-5">
                    <img src="img/bouchra.jpg" alt="Someone 1" >
                </div>
                <div class="col-md-7 text-center">
                    <h2 style="display:flex;justify-content:center;align-items:center;font-size:18px;">Someone 1 Someone 1</h2>
                </div>
            </div>
        </li>
        <li class="2" ></li>
        <li class="3" ></li>
                ...
    </ul>

Well this works as I wanted it to work ... I can loop through my lists and show hide them while scrolling ... But the problem is It is too fast, for every little wheel spin it changes all. I tried to do a timeout

var count = 1;
$(document).ready(function(){
    $(window).bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta /120 > 0) {
            setTimeout(function() {  $('li.'+count).addClass("show").siblings().removeClass("show");
            count = count - 1;
            if (count == 0) {
            count = 6;
          }
             }, 800);

        }
        else{
        setTimeout(function() {   $('li.'+count).addClass("show").siblings().removeClass("show");
          count++;
          if (count == 6) {
            count = 0;
          }
             }, 800);
        }


    });
});

But it didn't work, the event doesn't work but it remembers how many spins I did and apply them after. Im a newbie, please help ;-;

score 0 · Answer 1 · edited May 23 '17 at 12:06

I believe you're looking for a throttle.

Setting a timeout with setTimeout will delay the action, but all the actions will eventually run. A throttle works by only accepting one function for a given amount of time.

var throttle = 500; // .5 seconds
var time = -1;

element.addEventListener("myEvent", function (e) {
   var now = Date.now() // Current time, in milliseconds
   if (time !== -1 && now - time < throttle)
     return; // Get out, we haven't waited long enough

   time = now;
   // This will only run on the event after at least [throttle] ms have passed
   doThing();
})

Here's a JSFiddle that tries to make sense of your specific situation, though I'm not sure at all what you're going for. Play around with the throttle var to find what works best for you.

Please try to provide some working code in future questions with a JSFiddle or something similar!

P.S.: As I said I'm not sure what you're going for, but since mousewheel's wheelDelta has poor browser support, I'd consider using scroll and keeping track of your position on the screen manually.

delay on the mousewheel event

1 Answers1