Whirlwind991 Whirlwind991 - 7 months ago 27
Javascript Question

Jquery click function to fully excecute before being able to re-click

I have a panel that toggles when a button is clicked, depending on whether a class is located on the panel. If the user clicks the button multiple times halfway through the panel sliding open it causes a display issue because it attempts to execute several times when its only meant to execute once.

How can I make it so the panel will only fire on a single click and disregard multiple clicks while its executing - only being able to toggle again once the function has finished?

$('.options_search_tab').click(function () {

if (!$("#collapsePanel").hasClass("in")) {
$('#options_search_btn').toggle();

} });

Answer Source

I think what you are looking for is jQuery's stop() method:

https://api.jquery.com/stop/

$(document).ready(function() {
    $('#go').on('click', function() {
	$('.panel').stop(true).slideToggle(1500);
    });
});
.panel {
	width: 300px;
	height: 300px;
	background: cyan;
	position: absolute;
}
#go {
    margin-top: 305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='panel'></div>
<button id='go'>Go</button>