JQuery: 'body' element fires scroll event twice

Question

I implemented animation for my photologist. I still have a big problem because the body element activates the animation twice.

I think the problem is with $ ('body'). aimate. Since I think that when the body revives, the scroll event will be activated again and thus trigger the event twice.

The problem with my code is scrolling up the page. When I browse the page up. ScrollAnimatePrev will start, and then the $ ('body') element will animate. After the animation, the animation variable is set to false. But the $ ('body') element fires a scroll event, because I think when I set scrollTop, the scroll event fires. So, once again, currentPos is set to $ (window) .scrollTop (), then currentPos> previousPos returns true and! Animating returns true, so it fires scrollAnimate.

Now I want to fix it. How?

    $(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

I think this could lead to a double callback. I recently had a similar problem.

-

$('#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();
    }
});