Whirlwind991 Whirlwind991 - 1 year ago 50
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")) {

} });

Answer Source

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


$(document).ready(function() {
    $('#go').on('click', function() {
.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download