Javascript | How to prevent events to execute multiple times, until unless its done for once.

Question

So, i have a button, which is for hiding or showing a div. Its working fine but when i rapidly click on that button , for multiple times. The div keeps showing and hiding for secs, even though i finished clicking on it. I think its happening because due of clicking rapidly, which calls the event listener method multiple times. Any solution?

Answer 1

You could create event trigger once with following
btn.addEventListener("click", clickFn, {once: true});

And also add this event trigger once at the end of clickFn function, so triggering would be only set once whenever the clickFn has done the work.

Answer 2

You can add a boolean variable that waits a certain amount of time before each click

Answer 3

What!! I didn't know that. That's super cool. I really need to learn about event triggers.