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

Question

我正在处理一些涉及 jQuery 的 slideToggle 函数的工作。我在 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;
        }); 
    }
});

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

How do I ensure that no other javascript/jQuery function doesn't happen until the other slide functions complete?

javascript

jquery

slidedown

slideup

slidetoggle