마우스 휠 이벤트 지연

Question

이 문제가 발생하여이를 검색하거나 설명하는 방법을 모를 수 있습니다.mousewheel 이벤트를 사용하여 클래스를 추가하려고합니다. 내가 메신저 5 개 목록 요소로 반복하기 때문에이 코드를

`

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

     } 


    });});` 

을 JS 쓴, 나는 이러한 조건 ... 꽤 원시 코드를했지만 작업을했다.

내가이 일을 원하는대로

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

음이 작동하는 HTML ... 스크롤하는 동안 나는 내리스트와 쇼를 통해 루프를 숨길 수 있습니다 ...하지만 문제는가, 너무 빨리이다 모든 작은 바퀴 회전 그것은 모두를 바꾼다. 나는 시간 제한을

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


    }); 
}); 

을하려고 노력하지만, 이벤트가 작동하지 않습니다 작동하지 않았다하지만 내가 한 얼마나 많은 스핀을 기억하고 이후에 적용 할 수 있습니다. 초보자, 제발 도와주세요; -;

Answer 1

나는 스로틀을 찾고 있다고 생각합니다.

setTimeout으로 시간 제한을 설정하면 지연 시간이이되지만 모든 동작이 결국 실행됩니다. 스로틀은 주어진 시간 동안 하나의 기능 만 수락함으로써 작동합니다. 나는 당신이 건지 전혀 모르겠어요하지만

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

여기에, 특정 상황의 의미를하려고 JSFiddle입니다. throttle var로 놀아 당신에게 가장 적합한 것을 찾으십시오.

JSFiddle 또는 이와 유사한 내용으로 향후 질문에 유용한 코드를 제공해주십시오.

P.S : 내가 당신을 위해 건지 모르겠지만, mousewheel의 wheelDelta이 poor browser support이 있기 때문에, 나는 scroll 및 keeping track of your position on the screen manually 사용을 고려이라고 말했다으로.