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

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Дело в том, что за время вращения колеса мыши, событие 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.
    Интерактивный пример
    Ответ написан
    Комментировать
  • OwlCarousel первой версии. Как вынести скорость в переменную?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    $(document).resize(function() {
        $(".sldr").owlCarousel({
            slideSpeed :  $(window).width() >  768 ? 1500 : 300     
        });     
    });
    Ответ написан
    1 комментарий