在開發中有時候我們有一個點擊請求事件,如果操作者一直快速點擊就會一直請求,造成資源浪費爲此我們一般要進行處理防止用戶頻繁點擊
一般處理頻繁點擊有:
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這個方法,這樣我們就處理了用戶頻繁點擊的問題