前端js點擊事件處理多次頻繁點擊問題

在開發中有時候我們有一個點擊請求事件,如果操作者一直快速點擊就會一直請求,造成資源浪費爲此我們一般要進行處理防止用戶頻繁點擊

一般處理頻繁點擊有:

1.顯示隱藏

2.通過時間間隔進行判斷

3.使用節流處理

此次使用第三種如果想了解前兩種可進行搜索查詢

代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <button class="btn1" type="button">點擊</button>
    <script>
        window.onload = function() {
            var isFrist = true // 是不是第一次點擊
            function delBtn() {
                console.log('用戶處理事件')
            }
            var throttle = function(method, context){
              clearTimeout(method.tId);
              method.tId = setTimeout(function(){
                method.call(context);
              }, 300);
            }
            let btnDom = document.querySelector('.btn1')
            btnDom.onclick=function() {
                if (isFrist) {
                    // 如果是第一次點擊直接執行相關請求
                    delBtn()
                    isFrist = false
                }else {
                    // 如果不是第一次點擊進行節流
                    throttle(delBtn)
                }
                
            }
        }
    </script>
</body>
</html>

節流的主要方法就是throttle這個函數每隔300毫秒執行一次delBtn這個方法,這樣我們就處理了用戶頻繁點擊的問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章