How to disable the click on the object until the animation completes?

Sorry for the messy question. I have the following problem. There is code:

$(document).ready(function () {
 $('.main-nav > li').click(function (event) {
 $(this).find( $(".dropdown")).slideToggle("slow");
 var color = $( this ).css( "background" );
 if(color == "rgb(76, 58, 88) none repeat scroll 0% 0% / auto padding-box border-box"){
 $(this).css({"background" : "#ffffff", "transition" : "1s"});
 $(this).children("span").css({"background" : "url(/bitrix/templates/beautydrugs_mobile/img/menu-razdel-close.png)"}); 
 $(this).find( $(".border-link")).css({"transition" : "1s", "display" : "none"});
 $(this).find( $(".first-lvl-link a")).css({"color" : "#222222"});
 } else {
 $(this).css({"background" : "#4c3a58", "transition" : "1s"});
 $(this).children("span").css({"background" : "url(/bitrix/templates/beautydrugs_mobile/img/menu-section-open.png)"});
 $(this).find( $(".border-link")).css({"transition" : "1s", "display" : "block"});
 $(this).find( $(".first-lvl-link a")).css({"color" : "#ffffff"});
}


event.the stoppropagation();
});
 });


This is a common folding unfolding unit. Everything works well except the moment when the collapse button-expand press quickly several times. Because of this it fails. And styles change places. It would be clear to show the screenshots:

Here is when all blocks are collapsed

5b51a2084a720689349050.jpeg

So, when one block razvernut.

5b51a21c6a5f0869121270.jpeg

When we press again, the unit folds into itself and takes its original condition, as shown in 1 screenshot.

But if you click quickly on purpose or accidentally two times before over the collapse animation of the unfolding, that's

5b51a27ec0bc7874586657.jpeg

Logically, it is necessary to prohibit the execution of the script, to the moment until the animation ends, and all styles not apply. But how to do it, I can not think..
June 3rd 19 at 19:35
2 answers
June 3rd 19 at 19:37
Solution
var animationSpeed = 1000; // the Expected duration of the animation in ms
var disabledClick = false;

$(document).ready(function () {
 $('.main-nav > li').click(function (event) {
event.the stoppropagation();

 // If keypress is blocked
 if (disabledClick === true) {
 return false;
}

 // Block the push
 disabledClick = true;

 // Unlock press when the animation (presumably) must be completed
 setTimeout(function () {
 disabledClick = false;
 }, animationSpeed);

 $(this).find( $(".dropdown")).slideToggle("slow");
 var color = $( this ).css( "background" );
 if(color == "rgb(76, 58, 88) none repeat scroll 0% 0% / auto padding-box border-box"){
 $(this).css({"background" : "#ffffff", "transition" : "1s"});
 $(this).children("span").css({"background" : "url(/bitrix/templates/beautydrugs_mobile/img/menu-razdel-close.png)"}); 
 $(this).find( $(".border-link")).css({"transition" : "1s", "display" : "none"});
 $(this).find( $(".first-lvl-link a")).css({"color" : "#222222"});
 } else {
 $(this).css({"background" : "#4c3a58", "transition" : "1s"});
 $(this).children("span").css({"background" : "url(/bitrix/templates/beautydrugs_mobile/img/menu-section-open.png)"});
 $(this).find( $(".border-link")).css({"transition" : "1s", "display" : "block"});
 $(this).find( $(".first-lvl-link a")).css({"color" : "#ffffff"});
}
});
 });
June 3rd 19 at 19:39
Wouldn't it be easier to create a styles class ? and ask then .toggleClass ?
+ event.the stoppropagation(); and it should work fine )
Hmm you may be right, but it will have to be rewritten ) And so I would not want =( - Eva.Fisher commented on June 3rd 19 at 19:42

Find more questions by tags JavaScriptjQuery