javascript - 如何在动画完成之前停止按下导航按钮？

Question

我是个白痴，所以就这样......

问题:我正在使用幻灯片式导航系统来浏览产品。一切都很好，直到在动画完成之前不止一次单击下一个/上一个箭头。不止一次点击它会导致这个东西完全出错，并将 div 发送到一个不可逆转的水平螺旋中通过 hell 。我想知道是否有办法阻止用户多次单击下一个/上一个箭头，这样幻灯片导航就不会崩溃。

代码:

 var SlideWidth = 305;
    var SlideSpeed = 1000;

    $(document).ready(function () {
        // set the prev and next buttons display
        SetNavigationDisplay();
    });

    function CurrentMargin() {
        // get current margin of slider
        var currentMargin = $("#slider-wrapper").css("margin-left");

        // first page load, margin will be auto, we need to change this to 0
        if (currentMargin == "auto") {
            currentMargin = 0;
        }

        // return the current margin to the function as an integer
        return parseInt(currentMargin);
    }

    function SetNavigationDisplay() {
        // get current margin
        var currentMargin = CurrentMargin();

        // if current margin is at 0, then we are at the beginning, hide previous
        if (currentMargin == 0) {
            $("#PreviousButton").hide();
        }
        else {
            $("#PreviousButton").show();
        }

        // get wrapper width
        var wrapperWidth = $("#slider-wrapper").width();

        // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
        if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
            $("#NextButton").hide();
        }
        else {
            $("#NextButton").show();
        }
    }

    function NextSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() - SlideWidth;

        // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { SetNavigationDisplay() });

}

    function PreviousSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() + SlideWidth;

        // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { SetNavigationDisplay() });
    } 

还有导航按钮:

<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="padding-right:40px;"><img src="IMGS/arrow2.png"></a><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton" style="padding-right:40px;"><img src="IMGS/arrow.png"></a>

任何帮助 = 来 self 的性崇拜。

谢谢!

Answer 1

设置一个名为animating 的标记，当动画开始时设置为true，在动画结束回调函数中设置为false。然后只需测试标志的状态以确定是否触发下一个/上一个逻辑。

var animating = false;

// ...SNIP...

    function NextSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() - SlideWidth;

            // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    }

    function PreviousSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() + SlideWidth;

            // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    }