jQuery: элемент body активирует событие прокрутки дважды

Question

Я реализовал анимацию для своего фотоблога. У меня все еще большая проблема, потому что элемент body активирует анимацию дважды.

Я думаю, что проблема связана с $ ('body'). Animate. Потому что я думаю, что когда тело анимируется, событие прокрутки будет снова активировано, и, таким образом, событие будет активировано дважды.

Проблема моего кода заключается в прокрутке страницы вверх. Когда я прокручиваю страницу вверх. Будет активирован scrollAnimatePrev, а затем элемент $ ('body') оживит себя. После анимации для переменной анимации устанавливается значение false. Но элемент $ ('body') запускает событие прокрутки, потому что я предполагаю, что когда я устанавливаю scrollTop, событие прокрутки срабатывает. Таким образом, снова для currentPos устанавливается значение $ (window) .scrollTop (), а затем currentPos> previousPos возвращает значение true, а!

Теперь я хочу это исправить. Как?

    $(function() {
        var record = 0;
        var imgHeight = $(".images").height();
        var offset = $(".images").eq(0).offset();
        var offsetHeight = offset.top;
        var previousPos = $(window).scrollTop();
        var animating = false;
        var state = 0;
        $(window).scroll(function() {
            var currentPos = $(window).scrollTop();
            console.log(currentPos);
            if(currentPos > previousPos && !animating) {
                record++;
                scrollAnimate(record, imgHeight, offsetHeight);
                animating = true;
            } else if (currentPos < previousPos && !animating) {
                record--
                scrollAnimatePrev(record, imgHeight, offsetHeight);
                animating = true;
            }
            previousPos = currentPos;
            console.log(previousPos)
        })


        function scrollAnimate(record, imgHeight, offsetHeight) {
            $('body').animate(
                {scrollTop: (parseInt(offsetHeight) * (record+1)) + (parseInt(imgHeight) * record)},
                1000,
                "easeInOutQuart"                    
            )
            .animate(
                {scrollTop: (parseInt(offsetHeight) * (record)) + (parseInt(imgHeight) * (record))},
                1000,
                "easeOutBounce",
                function() {
                    animating = false;
                }
            )
        }

        function scrollAnimatePrev(record, imgHeight, offsetHeight) {
            $('body').animate(
                {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record)) - offsetHeight},
                1000,
                "easeInOutQuart"
            )
            .animate(
                {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record))},
                1000,
                "easeOutBounce",
                function() {
                    animating = false;
                }
            )
        }
    })

Answer 1

Я думаю, что это может вызвать этот обратный вызов дважды. У меня недавно была похожая проблема.

У меня было что-то похожее на

$('#id, #id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly(); })

Он дважды вызывал мой doSomethingOnceOnly(), и я подумал, что это были двойные селекторы в аргументе $ Я просто сделал 2 разных селектора, и он работал нормально. Вот так

$('#id').animate({width: '200px'}, 100);
$('#id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly(); );

Answer 2

Использование флага для управления триггером помогло мне.

var targetOffset = 0;
var allow_trigger = true;
$('html,body').animate({scrollTop: targetOffset}, 'slow', function() {
    if (allow_trigger) {
        allow_trigger = false;
        doSomethingOnlyOnce();
    }
});