Jquery OSX惯性滚动导致mousewheel.js以最轻微的滚动运动注册多个mousewheel事件

我有一个非常标准的Flexslider实例正在处理。与插件结合良好，允许幻灯片在鼠标滚轮事件上移动

然而，MacOSX和其他应用程序使用“intertia”来实现滚动效果，几乎不可能只向左或向右滚动一张幻灯片。一般的效果是，在这些情况下，即使是最轻微的滚动运动也会触发多个鼠标滚轮事件，并将滑块向左或向右滚动多个图像。显然，这不可能发生

我认为解决办法是使用——特别是“去盎司”函数。然而，我在JS/jQuery方面相对缺乏经验，不知道如何实现它

从下面的文档中：

去盎司：

去盎司（函数，等待，[立即]）

创建并返回一个 传递函数的新取消公告版本，该版本将推迟其 自上一次执行后已过等待毫秒后执行 调用它的时间。用于实现仅应 在输入停止到达后发生。例如：渲染 预览降价注释，在窗口后重新计算布局 已停止调整大小，等等

为立即参数传递true，以导致反Bounce触发 函数位于等待的前缘而不是后缘 间隔在防止意外事故等情况下非常有用 双击“提交”按钮以避免第二次触发

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

下面是我用来初始化flexslider的代码：

// MOUSEWHEEL FIX:

function debounceEffect() { // apply debounce to mousewheel here

}

// Initialize FlexSlider
$(window).load(function() {     
    $('div.flexslider').flexslider({
        animation:'slide',
        controlNav:true,
        mousewheel:true,
        pauseOnHover:true,
        direction:'horizontal',
        animationSpeed:500,
        slideshowSpeed:5000,
        after:debounceEffect
    });
});

不幸的是，我不知道如何将debounce函数应用于mousewheel事件。我想我只是不太了解运动部件

以下是：

//鼠标滚轮：
if（可变鼠标滚轮）{
slider.bind（'mousewheel'，函数（事件、增量、增量、增量）{
event.preventDefault（）；
var target=（delta<0）？slider.getTarget（'next'）：slider.getTarget（'prev'）；
slider.flexAnimate（目标、变量、暂停动作）；
});
}

如果这很重要的话，我可以编辑它以包含一些mousewheel插件代码，或者您也可以在上查看它

---

我将非常感谢在这方面的任何帮助

我认为主要的问题是你不能将去抖动作为一种后遗症，或者至少我不知道如何去抖动。让我们讨论一下这些部件是如何工作的：

当您调用

$（'div.flexslider'）.flexslider（{..}

）时，jQuery会查找所有元素，如

div.flexslider

（与往常一样），然后向其添加一个flexslider。flexslider会添加所有机制以使其成为一个滑块，包括设置绑定事件。您需要取消绑定的是实际绑定事件本身

似乎您通过查找相关的flexslider绑定代码已经非常接近了。我认为理想情况下您需要的是：

if (vars.mousewheel) {
  slider.bind('mouse wheel', _.debounce(function(…) {
   // usual flex slider code.
  }), 300);
}

我不确定在不直接编辑flexslider代码的情况下，如何实际注入这种去盎司

---

如果您想全局影响鼠标滚轮事件（我想您可能会这样），您可能可以对鼠标滚轮插件本身进行去抖动。我认为您必须将去抖动处理程序包装在去抖动中，然后将去抖动处理程序传递给and。

看起来此问题仍然存在

我使用此去盎司和更改flexslider.js获得了一些好结果，因此如下所示：

slider.bind('mousewheel', $.debounce( 100, true, function(event, delta, deltaX, deltaY){
     event.preventDefault();
     var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');

    slider.flexAnimate(target, slider.vars.pauseOnAction);
}));

slider.bind（'mousewheel'，$.debounce（100，true，函数（事件、增量、增量、增量）{
event.preventDefault（）；
var target=（delta<0）？slider.getTarget（'next'）：slider.getTarget（'prev'）；
slider.flexAnimate（目标、slider.vars.pauseOnAction）；
}));

你让它起作用了吗？是的-我用了debounce。它并不完美，但它起作用了：www.citylightphilly.com

slider.bind('mousewheel', $.debounce( 100, true, function(event, delta, deltaX, deltaY){
     event.preventDefault();
     var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');

    slider.flexAnimate(target, slider.vars.pauseOnAction);
}));