javascript - 在点击再次工作之前需要onclick去全程 [英] javascript - Need onclick to go full distance before click works again

问题描述

我有这个javascript函数，我点击时使用了一段距离。这是在从左到右的滚动条中使用，使用大约7个div。我的问题是如何在点击再次使用之前让点击进入全程？问题是如果用户快速点击箭头按钮，它会重置距离，有时可能会在图像中间而不是在接缝处。我想要用什么代码来完成这个？

I have this javascript function I use that when clicked goes a certain distance. This is used within a scroller going left to right that uses about 7 divs. My question is how do I get the click to go the full distance first before the click can be used again? The issue is if the user rapidly clicks on the arrow button it resets the distance and sometimes can end up in the middle of an image instead of right at the seam. What code am I missing to accomplish this?

$(function () {  

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

});

推荐答案

我认为最简单的方法是有一个布尔标志，表明动画是否正在进行：

I would've thought that the easiest way would be to have a boolean flag indicating whether or not the animation is taking place:

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

这篇关于javascript - 在点击再次工作之前需要onclick去全程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！