按钮频繁点击处理

最新推荐文章于 2022-06-30 10:06:35 发布

c_Yuan

最新推荐文章于 2022-06-30 10:06:35 发布

阅读量1.1k

点赞数 1

分类专栏： Js 前端

本文链接：https://blog.csdn.net/c_Yuan/article/details/49794727

版权

Js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

我们经常会在网站上面看到，当一个按钮被多次点击之后，提示系统频繁，并且在一段时间之后，才能再次点击。其实这对于js的实现来说非常简单，仅仅需要用到定时器。这里有一个点是非常重要的，当window.setTimeout 的时间设置过长时，因人在点击一个按钮时间过快，可能导致 setout() 事件调用多次。因此，这个时间一定要设置在200-- 300 ms 。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div" style="width: 40px;height: 20px;border: 1px solid red;background-color: #007aff;text-align: center;" οnclick="button()">按钮</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<script>
    var i=0;
    var closetimer = null;
    function button(){
        i++;
        closetimer = window.setTimeout(setout,200);
    }
    function setout() {
        if (i > 1) {
            alert('您的点击过于频繁，请稍后再试');
            window.clearTimeout(closetimer);
            closetimer = null;
            i = 0;
        } else {
            alert('成功');
            i = 0;
        }
    }
</script>

c_Yuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
按钮频繁点击处理

我们经常会在网站上面看到，当一个按钮被多次点击之后，提示系统频繁，并且在一段时间之后，才能再次点击。其实这对于js的实现来说非常简单，仅仅需要用到定时器。这里有一个点是非常重要的，当window.setTimeout 的时间设置过长时，因人在点击一个按钮时间过快，可能导致 setout() 事件调用多次。因此，这个时间一定要设置在200-- 300 ms 。
复制链接

扫一扫

专栏目录