Javascript 使onclick函数在css动画完成之前不起作用

我有这些“上一页”和“下一页”按钮，可以在我的网站上移动一些幻灯片。 单击其中一个时，它将转到下一张或上一张幻灯片，并使用css3 transition属性设置动画，并更改滑动容器的left属性+=或-=800px

#sliding-container {
position: relative;
left: -1600px;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

.slide {
width: 800px; height: 500px;
background-color: white;

transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}

这是js：_

    function slide(direction) {
            if (direction == 'prev') {
                    $("#sliding-container").css('left', '+=800px');

            }

            else if (direction == 'next') {
                    $("#sliding-container").css('left', '-=800px');

            }
        }

此幻灯片函数称为onclick：_

        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

问题

---

但问题是，如果您快速单击“下一步”或“上一步”按钮两次，它就会出错，这就是为什么，我希望函数不会在单击时再次运行，直到2秒钟过去（即，直到完成转换）。如何操作？

单击按钮时，可以将running等变量设置为true。然后需要像这样绑定到动画末端：

bind（'animationend webkitAnimationEnd'，函数（e）{ 运行=错误； });

这样，你就不必在拖延或超时的情况下胡闹，可以等待它告诉你事情已经结束

---

然后，单击可以在决定运行动画之前检查它当前是否正在运行

我使用了超时功能，在Fernker的帮助下，我想出了如何使用超时

我在标题部分的前面加了这个

    <script type="text/javascript">
    var running = false;
    </script>

这一行位于滑动函数的底部

window.setTimeout(function() {running = false;}, 2000); 

2000年，因为，这是过渡的时候了

我编辑了onclick部分

        <div class="fade" id="fade1" onclick="if (!running) { slide('prev'); }"><</div>
        <div class="fade" id="fade2" onclick="if (!running) { slide('next'); }">></div>

---

现在它工作了！所以基本上这是fernker的建议，只是有一个暂停，因为绑定不起作用。

谢谢，我会试试，但我需要更多的细节，你能告诉我js行应该是什么吗，我真的不知道如何根据情况编写你给出的js行。当然，因此，看看您的代码，您可能需要：$（“#幻灯片容器”）.bind（'transitionend WebKittTransitionEnd mozTransitionEnd'，函数（e）{running=false；}）；这将绑定到滑动容器的任何转换端，这就是您正在转换的，当它完成时，它将在该函数中执行您希望它执行的操作。很抱歉，这不起作用，另一方面，我确实解决了问题，并将其作为一个答案发布。。不管怎样，谢谢你，你确实给了我一个如何使用计时器的主意。我想如果你继续修修补补的话，我的解决方案应该会奏效。当您的方式工作时，如果更改转换时间或超时时间，它现在将中断。对于这样一个小的脚本，这可能不是一个问题，但是如果可以避免的话，这是一个糟糕的做法。

        <div class="fade" id="fade1" onclick="if (!running) { slide('prev'); }"><</div>
        <div class="fade" id="fade2" onclick="if (!running) { slide('next'); }">></div>