jQuery循环 - 鼠标滚轮控制？（如何防止鼠标滚轮持续循环？）

Question

我正在使用jQuery cycle与鼠标滚轮插件结合使用。我已经构建了它，以使鼠标滚轮根据滚动方式在循环中移动。然而，一旦循环发生变化，我希望暂时防止鼠标滚轮移动循环，直到它向相反方向移动或者直到循环移动速度变慢。

是否有任何方法可以暂时停止事件在每次被触发后被触发？

我已经创建了一个JSBIN:

http://jsbin.com/evaxas/10

编辑：修复了鼠标滚轮问题，现在它可以正常工作了。

--

编辑：在r0m4n的帮助下，我成功地找到了一个很好的解决方案。下面的答案很好，但会在调用滚动之前创建一点延迟，因此我决定创建一个可以绑定和重新绑定的函数。

http://jsbin.com/evaxas/13/

function wheelMove(event,deltaY) {
  event.preventDefault();
  $('#cycle').unbind('mousewheel', wheelMove);

  if (deltaY > 0) {
    $('#cycle').cycle('next');
  }
  if (deltaY < 0) {
    $('#cycle').cycle('prev');
  }
}

$(document).ready(function(){
  $('#cycle').cycle({
    fx: 'scrollVert',
    speed: 800,
    timeout: 0,
    after: function(){
      interval = setTimeout(function(){
        $('#cycle').bind('mousewheel', wheelMove);
      },1600);
    }
  });

  $('#cycle').bind('mousewheel',wheelMove);
});

- waffl

---

你为什么要使用 var oldDate = Date.now()？ - foxybagga

糟糕，那是一段与问题无关的代码。已编辑！ - waffl

Answer 1

对于每次鼠标滚轮的移动，您可以设置一个延迟，以延迟任何进一步的用户交互。

这可能需要进一步的时间调整才能完全完善，但请尝试使用以下js:

if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}

$(document).ready(function(){
    $('#cycle').cycle({
        fx: 'scrollVert'
    });

    var interval = "";
    $('#cycle').mousewheel(function(event, delta, deltaX, deltaY) {
        var o = '';
        clearTimeout(interval);
        if (deltaY > 0){                
            interval = setTimeout(function(){
                $('#cycle').cycle('next');
            },400);
        }
        else if (deltaY < 0){
            interval = setTimeout(function(){
                $('#cycle').cycle('prev');
            },400);
        }   
        //console.log(' pageY: ' + event.pageY );
    });  
});

- r0m4n

---

谢谢你的帮助，有了你的协助，我成功地找到了一个几乎完美的解决方案（请参见上面的编辑）。 - waffl

Answer 2

这段代码可能会有所帮助。在能够再次滚动之前，我使用了一个折射周期（1秒）。（将#slider替换为您的#cycle ID）

$('#slider').on("cycle-after",function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    // période réfractionnaire
    setTimeout(function(){ 
        $(outgoingSlideEl).removeClass('moving');
    },1000);
});

$('#slider').mousewheel(function(event, delta, deltaX, deltaY) {
    var slide = $('.cycle-slide-active');
    if($('.moving').size()==0 && slide.size()==1) {

        if(slide.css('left')=='0px' && slide.css('visibility')=='visible' && !slide.hasClass('moving')) {
            slide.addClass('moving');
            if (deltaY > 0){     
               $('#slider').cycle('next');
            }
            else if (deltaY < 0){
                $('#slider').cycle('prev');
            }   
        }
    }


});  

- guylabbe.ca