Verzögerung auf dem Mausrad Ereignis

Question

Ich stieß auf dieses Problem, dass ich keine Ahnung habe, wie man danach sucht oder es erklärt. Ich versuche, Klassen mit dem Mausrad Ereignis hinzuzufügen. Ich schrieb diesen 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; 
      } 

     } 


    });});` 

Da im Einschleifen in 5 Listenelemente JS, ich diese Bedingungen haben ... ziemlich primitiv-Code, aber hat seinen Zweck erfüllt.

Die 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> 

gut das funktioniert, wie ich es arbeiten ... wollte ich Schleife durch meine Listen und Show verstecken sie beim Scrollen ... Aber das Problem ist, es zu schnell ist, für Jedes kleine Rad dreht sich alles. Ich habe versucht, ein 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); 
     } 


    }); 
}); 

zu tun, aber es hat nicht funktioniert, wird das Ereignis nicht arbeiten, aber es erinnert sich, wie viele Spins ich tat und wendet sie nach. Ich bin ein Neuling, bitte helfen; -;

Answer 1

Ich glaube, Sie suchen nach einer Drossel.

Einstellen eines Timeout mit setTimeout wird Verzögerung die Aktion, aber alle Aktionen werden schließlich laufen. Eine Drossel funktioniert, indem sie nur eine Funktion für eine bestimmte Zeit akzeptiert.

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

Hier ist ein JSFiddle der Sinn Ihrer spezifischen Situation zu machen versucht, obwohl ich gar nicht sicher bin, was Sie gehen. Spielen Sie mit der throttle Var, um herauszufinden, was am besten für Sie funktioniert.

Bitte versuchen Sie, in zukünftigen Fragen einen Arbeitscode mit einem JSFiddle oder etwas Ähnlichem bereitzustellen!

P. S .: Wie ich sagte, ich bin nicht sicher, was du für, aber da mousewheel ‚s wheelDeltapoor browser support hat, würde ich prüfen scroll und keeping track of your position on the screen manually verwenden.