javascript - 在点击再次起作用之前需要点击才能走完全程

Question

我有这个 javascript 函数，我在点击一定距离时使用它。这用于从左到右使用大约 7 个 div 的滚动条中。我的问题是，在再次使用点击之前，如何让点击完成整个距离？问题是，如果用户快速点击箭头按钮，它会重置距离，有时会出现在图像的中间，而不是正好在接缝处。我缺少什么代码来完成这个？

$(function () {  

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
    });

});

Answer 1

我认为最简单的方法是使用一个 bool 标志来指示动画是否正在发生:

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {return;}
        var dir = (this.id === "right") ? '+=' : '-=';
        animating = true;
        outerwrap.animate({
            scrollLeft: dir + '251'
        }, 1000, function () {
            animating = false;
        });
    });

});

对我有用:http://jsfiddle.net/BYossarian/vDtwy/4/