javascript'；点击'；缺陷

我在Javascript中有一个错误，我正在对父容器的marginleft属性设置动画，以某种下一个/上一个方式显示其子div。问题是，如果高频单击“下一步”，则if语句似乎被忽略（即，仅当单击、等待动画，然后再次单击时才起作用）：

可以在JSFIDLE上看到一个示例-

---

任何帮助都将不胜感激。

使用变量跟踪动画是否正在发生。伪代码：

var animating = false;

function myAnimation() {
  if (animating) return;
  animating = true;     

  $(this).animate({what:'ever'}, function() {
    animating = false;
  });
}

粗糙，但它应该给你的想法

---

编辑：您当前的代码对我来说也很好，即使我按下了按钮。在firefox上。

尝试下面的代码，该代码基本上会检查容器是否正在设置动画，只要从函数返回即可

工作

---

有时，如果您创建一个函数来处理动画，而不是在每个事件处理程序（下一步，返回）上编写动画代码，效果会更好。此外，用户无需等待动画完成即可进入第n页/框

也许这会帮助你：

if (jQuery) {
    var $next = $(".next"),
        $back = $(".back"),
        $box = $(".box"),
        regWidth = $box.width(),
        $contain = $(".wrap")
        len = $box.length;

    var combinedWidth = regWidth*len;

    $contain.width(combinedWidth);



    var currentBox = 0; // Keeps track of current box

    var goTo = function(n) {
        $contain.animate({
            marginLeft: -n*regWidth
        }, {
            queue: false, // We don't want animations to queue
            duration: 600
        });

        if (n == 0) $back.fadeOut('fast');
        else $back.fadeIn('fast');

        currentBox = n;
    };




    $next.click(function(e) {
        e.preventDefault();
        var go = currentBox + 1;
        if (go >= len) go = 0; // Index based, instead of margin based...
        goTo(go);
    });




    $back.click(function(e) {
        e.preventDefault();
        var go = currentBox - 1;
        if (go <= 0) go = 0; //In case back is pressed while fading...
        goTo(go);
    });

}

if（jQuery）{
var$next=$（“.next”），
$back=$（“.back”），
$box=$（“.box”），
regWidth=$box.width（），
$contain=$（“.wrap”）
len=$box.length；
var combinedWidth=regWidth*len；
$contain.WITH（组合宽度）；
var currentBox=0；//跟踪当前框
var goTo=函数（n）{
$contain.animate({
marginLeft:-n*regWidth
}, {
queue:false，//我们不希望动画排队
持续时间：600
});
如果（n==0）$back.fadeOut（'fast'）；
else$back.fadeIn（'fast'）；
currentBox=n；
};
$next。单击（函数（e）{
e、 预防默认值（）；
var go=currentBox+1；
如果（go>=len）go=0；//基于索引，而不是基于边距。。。
后藤；
});
$back。单击（函数（e）{
e、 预防默认值（）；
var go=当前框-1；
如果（单击“快速”时转到，动画会排队（因为浏览器忙于响应单击事件而等待），您可以指定一个浏览器吗？它在Chrome上运行良好。似乎所有浏览器都可以，包括Chrome（build 11）-在IE7-9、Firefox和Chrome上测试-我应该在黑色卷轴后解释，它应该滑回绿色而不是继续白色：）@joe_peachy-这对你有帮助吗？谢谢@victmo-这是一个很好的简洁方式，可以达到想要的无bug效果-mucho gracias！
                 $next.click(function (e) {
                    e.preventDefault();

                    if($contain.is(":animated")){
                        return;
                    }

                    var marLeft = $contain.css('margin-left'),
                        $this = $(this);

                    if (marLeft === (-combinedWidth + (regWidth) + "px")) {
                        $contain.animate({
                            marginLeft: 0
                        }, function () {
                            $back.fadeOut('fast');
                        });
                    } else {
                        $back.fadeIn(function () {
                            $contain.animate({
                                marginLeft: "-=" + regWidth + "px"
                            });
                        });
                    }
                    if (marLeft > -combinedWidth) {
                        $contain.animate({
                            marginLeft: 0
                        });
                    }
                });

if (jQuery) {
    var $next = $(".next"),
        $back = $(".back"),
        $box = $(".box"),
        regWidth = $box.width(),
        $contain = $(".wrap")
        len = $box.length;

    var combinedWidth = regWidth*len;

    $contain.width(combinedWidth);



    var currentBox = 0; // Keeps track of current box

    var goTo = function(n) {
        $contain.animate({
            marginLeft: -n*regWidth
        }, {
            queue: false, // We don't want animations to queue
            duration: 600
        });

        if (n == 0) $back.fadeOut('fast');
        else $back.fadeIn('fast');

        currentBox = n;
    };




    $next.click(function(e) {
        e.preventDefault();
        var go = currentBox + 1;
        if (go >= len) go = 0; // Index based, instead of margin based...
        goTo(go);
    });




    $back.click(function(e) {
        e.preventDefault();
        var go = currentBox - 1;
        if (go <= 0) go = 0; //In case back is pressed while fading...
        goTo(go);
    });

}