Как выполнять функцию по завершении часто повторяющегося события, а не много раз подряд?

Question

[nfobdw143]

Есть такой код. Всё прекрасно работает, но при прокрутке более чем на один скролл, owl.next(); и owl.prev(); срабатывают многократно, и в результате все слайды пролистываются в конец/начало соответственно. Как сделать, чтоб листалось всегда на один слайд, независимо от того, как сильно пользователь "крутанул" колёсико мыши?

$(document).ready(function() {
   
    var owl = $(".sldr").owlCarousel().data('owlCarousel');

    $(window).on('mousewheel', function(event) {
        
        if(event.deltaY < 0){
            owl.next();           
        }
        if(event.deltaY > 0){
            owl.prev();           
        }
    });  
     
});

Пробовал выставлять false/true при beforeMove: afterMove: и запускать прокрутку только при true, но afterMove выполняется раньше, чем пролистывается слайд.

Answer 1

[Алексей Уколов]

Дело в том, что за время вращения колеса мыши, событие mousewheel срабатывает много раз. Соотвественно и обработчик события срабатывает столько же раз.
Чтобы этого избежать, нужно применить debounce обработчика, то есть сделать так, чтобы он выполнился один раз через n миллисекунд после его последнего вызова. Если с момента последнего вызова не прошло n миллисекунд, а обработчик был вызван еще раз, его выполнение откладывается еще на n миллисекунд.
В данном случае, обработчик выполнится через 100 миллисекунд после того, как перестанут поступать события скролла (100 - это просто пример, реальное значение нужно подбирать исходя из ситуации):

$(document).ready(function () {
    var owl = $(".sldr").owlCarousel().data('owlCarousel');

    $(window).on('mousewheel', debounce(function (event) {
        var direction = event.originalEvent.deltaY < 0 ? 'next' : 'prev';
        owl[direction]();
    }, 100));   
});

Код функции debounce

function debounce(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function () {
        var last = new Date().getTime() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function () {
        context = this;
        args = arguments;
        timestamp = new Date().getTime();
        var callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
}

Реализацию функции debounce я беззастенчиво позаимствовал из библиотеки underscore.

Интерактивный пример

Answer 2

[nfobdw143]

Реализовал таким образом.

$(document).ready(function() {
   
    var speed = 1500    

    var owl = $(".sldr").owlCarousel({
        slideSpeed : speed
    }).data('owlCarousel');

    var f = true;
    function s(){
        f = false;
        function d() {
            f = true;
        }
        setTimeout(d, speed);
    }s();

    $(window).on('mousewheel', function(event) {        
        if(event.deltaY < 0 && f == true){
            owl.next();           
            s();
        }
        if(event.deltaY > 0 && f == true){
            owl.prev();            
            s();
        }
    });    
});

Comments

[Алексей Уколов]

1. Однобуквенные названия - очень плохо. Вы уже через месяц не вспомните что эти буквы значат.
2. event.originalEvent.deltaY, а не event.deltaY
3. Вот так читабельнее:

$(window).on('mousewheel', function (event) {
        if (!f) {
            return;
        }

        if (event.originalEvent.deltaY < 0) {
            owl.next();
        } else {
            owl.prev();
        }

        s();
    });

4. Самый главный минус этого решения - полная неподдерживаемость. Debounce - это стандартное решение, знакомое многим программистам, а в этой системе флагов и таймеров нужно разбираться (однобуквенные названия, как я уже писал, ничуть в этом не помогают). Я даже не уверен, что это решение не имеет багов - его невозможно протестировать.

[nfobdw143]

Алексей Уколов: Однобуквенные названия для теста, нет смысла заморачиваться в процессе поиска решения. В проекте они уже изменены. event.deltaY -взято из документации mousewheel

[nfobdw143]

Алексей Уколов: Кроме того, поддерживаемость за счёт Debounce выглядит довольно странно. С setTimeout разберётся даже новичок, который о Debounce даже не слышал.

[Алексей Уколов]

nfobdw143: Я понимаю, что из документации, но в обработчик вам приходит jquery-event, в нем нет никакого deltaY, поэтому и нужно обращаться к originalEvent. Выведите в консоль event.deltaY - он всегда undefined.

[Алексей Уколов]

nfobdw143: дело в том, что с debounce не нужно разбираться, нужно понять концепцию и использовать готовую оттестированную функцию. Один раз разобрались - level up. А вот в этом велосипеде действительно нужно разбираться, понимать как он работает, а если он не дай бог не работает, дебажить его.

[nfobdw143]

Алексей Уколов: Так и event.originalEvent.deltaY в консоли всегда undefined. При вызове всё верно -1/1

[Алексей Уколов]

nfobdw143: Странно, здесь не работает

[nfobdw143]

Алексей Уколов: Я подключал https://github.com/jquery/jquery-mousewheel

[Алексей Уколов]

А, все ясно. Тогда, разумеется, ваш код правильный.

[nfobdw143]

Алексей Уколов: В общем, проблема решена. Спасибо за помощь и советы.