How do I set a limit on how many times I can use slideToggle?-CodePudding

If I rapidly click the div on an HTML website that calls the .slideToggle() method, it will continuously open and close as many times I click the button. The issue comes that after I stop clicking, the <div> will still open and close itself and keep on doing so until it reaches the number of times I clicked it. If you rapidly hit "Toggle" logo, this demo has the same issue. See this example: https://css-plus.com/examples/2010/03/slidetoggle/index

$("#examplebutton1").click(function()
{
    $("#examplecontent1").slideToggle(500);
});

I originally tried inserting the .slideToggle() method, but that obviously didn't work. Is there a way I can make it so the method would work if the div if fully extended or fully closed?

CodePudding user response：

You can use a setTimeout and a global variable to check if a transition is already going on:

let transitionIsHappening = false;
$("#examplebutton1").click(function() {
    if (transitionIsHappening) return;
    transitionIsHappening = true;
    $("#examplecontent1").slideToggle(500, () => transitionIsHappening = false);
});