У меня есть довольно стандартный экземпляр Flexslider, над которым я работаю.FlexSlider хорошо сочетается сjquery.mousewheel.js плагин, позволяющий слайдам перемещаться по событиям колесика мыши.

Однако Mac OSX и другие используют «intertia» для прокрутки эффектов, что делает практически невозможным прокрутку только одного слайда влево или вправо. Общий эффект заключается в том, что даже малейшее движение прокрутки в этих ситуациях запускает несколько событий колесика мыши и прокручивает ползунок несколько изображений влево или вправо. Очевидно, этого не может быть!

Я думаю, что решение заключается в использованииunderscore.js - в частности, функция «debounce». Тем не менее, я относительно неопытен в JS / jQuery и не могу понять, как это реализовать.

Из документации подчеркивания:

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

Создает и возвращает новую отклоненную версию переданной функции, которая будет откладывать выполнение до истечения миллисекунд ожидания с момента последнего вызова. Полезно для реализации поведения, которое должно происходить только после того, как ввод прекратил поступать. Например: предварительный просмотр комментария к Markdown, пересчет макета после того, как размер окна перестал изменяться, и так далее.

Передайте true для непосредственного параметра, который заставит debounce вызвать функцию в начале, а не в конце интервала ожидания. Полезно при таких обстоятельствах, как предотвращение повторного двойного нажатия кнопки «Отправить» во второй раз.

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. Я думаю, что просто недостаточно хорошо понимаю движущиеся части.

Здесьсоответствующий фрагмент кода из плагина flexslider:

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

Я могу отредактировать это, включив в него часть кода плагина mousewheel, если это важно, или вы можете проверить это наGitHub.

Буду признателен за любую помощь в этом!