我的前端组件----多个按钮快速点击只执行最后一次。

2024年1月4日 97次阅读 来源: 兔子舞

缘起：
实现一个业务场景时，因为某某某原因，不能让客户对某些按钮进行1秒点10次的骚操作，所以需要实现多个按钮快速点击只执行最后一次。

代码

<!DOCTYPE html>
<html>
<head>
    <title>快速点击只执行最后一次</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        .wrap{
            width:400px;
            height:460px;
            border:1px solid red;
        }
        .wrap ul li {
            float: left;
            width: 140px;
            height: 100px;
            margin:20px;
            line-height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .wrap p{
            float: left;
            padding-left: 20px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <ul class="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <p>最后一次显示的是：<span id="content"></span></p>
</div>

<script type="text/javascript">

    var list = document.querySelectorAll('li')
    console.log(list)
    // 闭包方法实现循环
    // for(var i=0;i<list.length;i++){
    //     (function(){   
     //      var p = i   
    //         list[i].onclick = function() {   
    //            console.log(p+1);   
    //         } 
     //     })();
    // }

    //不用闭包循环，只需要把var改为let,使i变量作用域范围变成块级即可。
    for(let i=0;i<list.length;i++){
        var timer = null;
        list[i].onclick = function() {  
             if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function(){
                document.querySelector('#content').innerHTML = i + 1;
                console.log(i+1); 
                timer = null;
            },500);
              
         };
    }
</script>
</body>
</html>

例行总结：
这样的需求可能比较少吧，但是还是有用的。一般可以根据实际需要，根据按钮的Index判断，如果当前按钮被激活，则不允许再被点击。如果是快速在多个按钮下切换，则可以用上面提供的方法，只执行最后一次。但是有个弊端，比如只点击一次，命令也会在500毫秒之后才下发。还需要完善一下。

    原文作者：兔子舞
    原文地址: https://segmentfault.com/a/1190000016783835
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞