Prevent multiple clicks on a link using JS or jquery

Question

I have a link which on click opens a modal popup. If the network connection is slow it takes sometime to open the popup. And if the user is super fast, he might click the link multiple times and their are multiple popups coming on the screen. I want to prevent user's multiple click on the link.

I disabled the link on the first click. but the problem is when the popup is closed , it doesnt enable the link again.

How do i prevent these multiple clicks nd make sure that when the popup is not shown, the link is enabled.

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

Answer 1

You can use a flag variable to keep track of whether the link has been already clicked or not, and allow click event callback to execute only if is hasn't been clicked before.

var isClicked;   
$('#link').click(function() {
   if(isClicked){
     return false;
   }
   isClicked = true; 
   $("#popup").show();
});

Now you can update isClicked = falsewhere you do $("#popup").hide();