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

最新推荐文章于 2024-06-03 14:11:09 发布

禁止喧哗

最新推荐文章于 2024-06-03 14:11:09 发布

阅读量3.9k

点赞数

分类专栏： js HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_41555595/article/details/120532603

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

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

基本思想：

就是禁止用户在短时间多次点击点击按钮，致使后端多次执行重复的操作，所以要在用户点击后一定时间内将按钮禁用。可以用定时器实现，一定时间之后用户可再次点击按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Time Disable Button</title>
    <script src="https://code.jquery.com/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秒后：
三秒后

禁止喧哗

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端HTML中防止用户在短时间内频繁多次点击按钮

前端HTML中防止用户在短时间内频繁多次点击按钮基本思想：就是禁止用户在短时间多次点击点击按钮，致使后端多次执行重复的操作，所以要在用户点击后一定时间内将按钮禁用。可以用定时器实现，一定时间之后用户可再次点击按钮。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Short Time Disable Button</title
复制链接

扫一扫

专栏目录