title: delay on the mousewheel event
body: <p>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</p>
  
  <p>`</p>
  
  <pre><code>var count = 1;
  $(document).ready(function(){
      $(window).bind('mousewheel', function(e){
          if(e.originalEvent.wheelDelta /120 &gt; 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;
            }
  
          }
  
  
      });});`
  </code></pre>
  
  <p>Since im looping into 5 list elements, I did those conditions ... pretty primitive code, but did the job.</p>
  
  <p>The html</p>
  
  <pre><code>&lt;ul class="list-unstyled"&gt;
              &lt;li class="1 show" &gt;
              &lt;div class="row"&gt;
                  &lt;div class=" col-md-5"&gt;
                      &lt;img src="img/bouchra.jpg" alt="Someone 1" &gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-7 text-center"&gt;
                      &lt;h2 style="display:flex;justify-content:center;align-items:center;font-size:18px;"&gt;Someone 1 Someone 1&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="2" &gt;&lt;/li&gt;
          &lt;li class="3" &gt;&lt;/li&gt;
                  ...
      &lt;/ul&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>var count = 1;
  $(document).ready(function(){
      $(window).bind('mousewheel', function(e){
  
          if(e.originalEvent.wheelDelta /120 &gt; 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);
          }
  
  
      });
  });
  </code></pre>
  
  <p>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 ;-;</p>