拖动鼠标事件

Question

我遇到了这个问题，我不知道如何搜索或解释它。 我正在尝试使用mousewheel事件添加类。 我写了这个JS代码

`

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

     } 


    });});` 

由于IM循环到5个列表元素，我做了这些条件......漂亮的原始码，但做的工作。

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

好这个工程，我想它的工作......我可以循环通过我的列表和显示隐藏他们，而滚动......但问题是，这是太快了，对于每一个小轮子旋转它都会改变。 我试图做一个超时

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。