我的前端元件—-多個按鈕快速點選只執行最後一次。

兔子舞發表於2019-02-16
前端元件

緣起：
實現一個業務場景時，因為某某某原因，不能讓客戶對某些按鈕進行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毫秒之後才下發。還需要完善一下。

相關文章