javascript - 防止另一个事件在前一个事件在 jQuery 中完成之前触发？

Question

http://jsfiddle.net/jmPCt/18/

我对 JS 和 jQuery 很陌生。我已经在上面的链接中手动编写了所有代码。它可以工作并且可以做我希望它保存的事情，但只有一件事。如果您快速单击“下一个”链接，您将看到要显示的下一个容器的闪烁，或者，如果您单击得足够快，代码将显示两个容器，但我只想一次显示一个。有没有办法在 jQuery 中处理这个问题？我尝试过使用此处讨论的停止：How to prevent jquery hover event from fire when not complete? 但这并不能解决问题。

Answer 1

您正在寻找.stop(). 它的实现随所需行为而变化，但文档应该为您清除： http: //api.jquery.com/stop

这是一个演示：http: //jsfiddle.net/jmPCt/19/

由于.stop()工作原理，当您使用它时，.fadeIn()或者.fadeOut()您可以将动画切碎到它们不再起作用的程度。我发现的最佳解决方法是始终使用以下方法将动画设置为绝对值.fadeTo()：http ://api.jquery.com/fadeTo

这是我添加到您的 JSFiddle 中的代码，它用使用and的函数覆盖了默认函数.fadeIn()和.fadeOut()jQuery 函数：.fadeTo().stop()

$.fn.fadeOut = function (duration, callback) {
    $(this).stop().fadeTo(duration, 0, function () {
        $(this).css('display', 'none');
        if (typeof callback == 'function') {
            callback();
        }
    });
};
$.fn.fadeIn = function (duration, callback) {
    $(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
        if (typeof callback == 'function') {
            callback();
        }
    });
};

更新

如果您position为“幻灯片”元素设置属性，那么它们可以相互叠加动画，这将消除您的代码表现出的跳跃性：

HTML --

<div id="controls">
    <div id="countah"></div>
    <a href="#" id=prev>prev</a> | 
    <a href="#" id=next>next</a>
</div>

CSS——

.js .staceyPort {
    display: none;
    position : absolute;
    top      : 0;
    left     : 0;
}

#controls{ 
    position   : fixed;
    bottom     : 0;
    left       : 0;
    z-index    : 1000;
    background : gold;
}​

这是一个演示：http: //jsfiddle.net/jmPCt/21/