开发中页面按钮高频率触发，导致事件执行异常的解决方案

最新推荐文章于 2021-12-12 11:33:12 发布

Nick Peng

最新推荐文章于 2021-12-12 11:33:12 发布

阅读量531

点赞数

分类专栏：前端文章标签：防止页面按钮高频率点击方案 javascript

本文链接：https://blog.csdn.net/PY0312/article/details/104962598

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、实现效果图

以下验证，都是在高频率的点击下进行的，可在右侧 Console 窗口看出事件执行的频次；

二、完整限频代码

下面是上述效果图的完整demo，常见的限频都可以参考这个来写；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>防止高频点击Demo</title>
</head>
<body>
    <div><br>
        <button id="btn1">无限制:一秒内执行多次事件</button><br><br>
        <button id="btn2">限制:一秒内只执行一次事件</button>
    </div>
    <script type="text/javascript">
    window.onload = function() {
        var num = 1;
        console.log(num);
        // 无限制
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function(){
            //事件
            console.log(num+=1);
        }
        // 加限制
        var oBtn = document.getElementById("btn2");
        var isClick = true;
        oBtn.onclick = function(){
            if (isClick) {
                isClick = false;
                //事件
                console.log(num+=1);
                //定时器, 一秒内重复点击不执行事件
                setTimeout(function() {
                    isClick = true;
                }, 1000);
            }
        };
    };
    </script>
</body>
</html>

Nick Peng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开发中页面按钮高频率触发，导致事件执行异常的解决方案

目录一、实现效果图二、完整限频代码好文章记得收藏+点赞+关注额！！！---- Nick.Peng一、实现效果图以下验证，都是在高频率的点击下进行的，可在右侧 Console 窗口看出事件执行的频次；二、完整限频代码下面是上述效果图的完整demo，常见的限频都可以参考这个来写；<!DOCTYPE html><html><head>...
复制链接

扫一扫