失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 前端HTML中防止用户在短时间内频繁多次点击按钮

前端HTML中防止用户在短时间内频繁多次点击按钮

时间:2022-01-11 15:07:17

相关推荐

前端HTML中防止用户在短时间内频繁多次点击按钮

前端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秒后:

如果觉得《前端HTML中防止用户在短时间内频繁多次点击按钮》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。