jquery - OSX 惯性滚动导致 mousewheel.js 通过最轻微的滚动运动注册多个鼠标滚轮事件

Question

我正在开发一个非常标准的 Flexslider 实例。 Flexslider与 jquery.mousewheel.js 很好地结合在一起插件，允许幻灯片在鼠标滚轮事件上移动。

然而，Mac OSX 和其他操作系统采用“intertia”来滚动效果，使得几乎不可能只向左或向右滚动一张幻灯片。一般效果是，在这些情况下，即使是最轻微的滚动运动也会触发多个鼠标滚轮事件，并使 slider 向左或向右滚动多个图像。显然，这是不可能发生的!

我认为解决方案是使用 underscore.js - 特别是“去抖”功能。然而，我对 JS/jQuery 的经验相对不足，不知道如何实现它。

来自下划线的文档:

Debounce: _.debounce(function, wait, [immediate])

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

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

不幸的是，我不知道如何将去抖动功能应用于鼠标滚轮事件。我想我只是不太了解移动部件。

这是relevant bit of code from the flexslider plugin :

    // MOUSEWHEEL:
    if (vars.mousewheel) {
      slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
        slider.flexAnimate(target, vars.pauseOnAction);
      });
    }

如果重要的话，我可以编辑它以包含一些鼠标滚轮插件代码，或者您可以在 github 上查看它。 .

如果有任何帮助，我将不胜感激!

Answer 1

我认为主要问题是你无法将去抖 Action 为后效应用，或者至少我不知道如何应用。让我们来谈谈这些部分是如何工作的:

当您调用 $('div.flexslider').flexslider({ .. }) 时，jQuery 会查找所有像 div.flexslider 的元素(像往常一样)并且然后向其中添加一个 flexslider。flexslider 添加所有机制以使其成为 slider ，包括设置绑定(bind)事件。您需要去抖的是实际的绑定(bind)事件本身。

看来您通过找到相关的 flexslider 绑定(bind)代码已经非常接近了。我认为你理想的情况是这样的:

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

我不确定在不直接编辑 flexslider 代码的情况下如何实际注入(inject)此去抖。

如果您想全局影响鼠标滚轮事件(我猜您可能会这样做)，您可能可以对鼠标滚轮插件本身进行反跳。我认为您必须将 handler 包装起来去抖，然后将去抖处理程序传递给 addEventListener和 removeEventListener .