前端HTML中防止用户在短时间内频繁多次点击按钮
基本思想:
就是禁止用户在短时间多次点击点击按钮,致使后端多次执行重复的操作,所以要在用户点击后一定时间内将按钮禁用。可以用定时器实现,一定时间之后用户可再次点击按钮。
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Short Time Disable Button</title><script src="/jquery-3.6.0.min.js"></script></head><body><button onclick="shortTimeDisableButton(3, this)">Access</button><script>function shortTimeDisableButton(second, that){$(that).attr('disabled',true);let startInterval = setInterval(function() {$(that).attr('disabled',false);clearInterval(startInterval);}, 1000*second);}</script></body></html>
效果
点击后:
3秒后: