如何確保在其他幻燈片功能完成之前，不會發生其他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; }); } });