Javascript 防止使用JS或jquery多次单击链接

我有一个链接，点击打开一个模式弹出窗口。如果网络连接缓慢，则需要一些时间才能打开弹出窗口。如果用户速度非常快，他可能会多次单击链接，屏幕上会出现多个弹出窗口。 我想防止用户多次点击链接

我在第一次单击时禁用了链接。但问题是当弹出窗口关闭时，它不会再次启用链接

我如何防止这些多次点击，并确保当弹出窗口未显示时，链接已启用

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

---

您需要使用回调函数，并且可以将其放在两个位置之一：作为传递到show（）的参数或任何触发模式关闭的脚本中

要添加以显示更改，请执行以下操作：

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

到

---

（请参阅了解为什么在关闭弹出操作时应使用prop而不是attr启用按钮。 像这样：

$( "#popup" ).hide( "slow", function() {
    $("#link").removeAttr('disabled');
  });

您可以使用标志变量来跟踪链接是否已被单击，并且仅当以前未单击过链接时才允许执行单击事件回调

---

现在，您可以更新

isClicked=false

中的

$（“#popup”）.hide（）

您可以使用setTimeout。单击按钮后运行函数禁用按钮，并在一段时间后调用超时以重新启用它。

使用setTimeout和“指针事件：无”总是为我完成任务

$('#link').click(function(e) {
  $("#popup").show();
  $(e.currentTarget).css({'pointer-events': 'none', 'cursor': 'not-allowed'});
  setTimeout(() => $(e.currentTarget).css({'pointer-events': 'auto', 'cursor': 'pointer'}), 300);
});

---

是的，先生。现在我正在用我的代码编辑帖子。添加了相关代码。每当你调用

$（“#popup”）.hide（）

添加这个：

$（“#link”）.removeAttr（“禁用”）；

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

$('#link').click(function(e) {
  $("#popup").show();
  $(e.currentTarget).css({'pointer-events': 'none', 'cursor': 'not-allowed'});
  setTimeout(() => $(e.currentTarget).css({'pointer-events': 'auto', 'cursor': 'pointer'}), 300);
});