javascript - 如何确保在其他幻灯片功能完成之前不会发生其他 javascript/jQuery 功能？

Question

我正在做一些涉及 jQuery 的 slipToggle 函数的事情。我在JSFiddle上创建了一个示例。如果您在其中并尽可能快地从下往上单击按钮，则无论上一张幻灯片是否完成，幻灯片都会在您单击时发生。我想这样做，以便在幻灯片完成之前其他按钮无法执行任何操作。我不想启动一系列操作，因为如果您点击疯狂，您可能会需要一些时间来等待。有什么建议或技巧可以帮助我解决这个问题吗？

我这样做是因为在我正在开发的实际网站上，每个按钮都会发生一些滑动操作。问题在于多个按钮共享其动画部分。如果有人点击几个按钮的速度太快，就会导致某些部分消失。我想让其他按钮在点击功能完成之前不起作用。

我在 JSFiddle 示例中切换它的代码是这样的

HTML

<section id="big1" class="big">
    <img class="bg-image" src="http://lorempixel.com/output/abstract-q-c-640-480-3.jpg" />
</section>
<section id="bar1" class="bar">
    <a id="btn-1" href="#">Button for 1</a>
</section>

jQuery

$("#btn-1").click(function () {
    $("#big1").slideToggle();
});

在 JSFiddle 中，这些操作重复 6 次以创建 6 个按钮。

Answer 1

在你的 JSfiddle 中尝试这样的事情:

//Hide all big
$(".big").hide();
var slideInProgress = false;

//Create button functions to toggle the slide open and close
$(".bar > a").click(function () {
    if(!slideInProgress) {
        slideInProgress = true;
        $(this).parents('section').next().slideToggle(400, function() {
            slideInProgress = false;
        }); 
    }
});