前端關於防抖和節流
阿新 • • 發佈：2020-07-10
防抖
使用者短時間內觸發相同的網路請求, 我們限制請求次數, 減輕伺服器之間的壓力, 就叫防抖
舉例來說: 某購物商城上面搜尋框的智慧提示, 使用者輸入東西之後, 會很快向伺服器傳送請求, 如果監聽input事件而不做防抖操作,傳送請求頻率就會很頻繁, 從而造成伺服器壓力過大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<input type="text" id="ipt">
<script>
const ipt
防抖的核心是通過定時器來新增延遲, 從而延遲 網路請求的呼叫, 當用戶短時間再次觸發的時候 , 先清除該定時器 , 定時器如果時間沒到 , 裡面的網路請求就不會發送出去 , 隨著清除定時器 一起釋放了 , 網路請求自然就減少了
節流
所謂的節流, 主要是遊戲用的多, 例如 英雄聯盟 平A補刀, 假設使用者點 A 就會發送請求, 那麼, 只要這個人手速夠快, 一秒鐘點個十來次A, 英雄是否就會A 10刀呢? 其實不然, 無論該使用者點選 A 多頻繁, 英雄都只會在一定間隔內攻擊一次, 這就是節流操作
在相同的事件內, 當前事件觸發後, 使用者再次觸發該事件, 就會失效, 直到設定的節流時間 過 , 使用者才能再次觸發該事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">節流使用</button>
<script>
const btn = document.querySelector("#btn");
btn.onclick = () => {
fnAjax()
}
const ajax = () => {
console.log("123")
}
const fnAjax = fn(ajax, 2000)
function fn(cb, delay) {
cb.flag = true
return function () {
if (cb.flag) {
cb.flag = false;
setTimeout(() => {
cb()
cb.flag = true
}, delay)
}
}
}
</script>
</body>
</html>
節流的核心, 同樣是通過定時器, 來延遲傳送網路請求的時間 , 和 防抖 的區別在於, 節流是通過 變數的布林值 來控制 請求的時間間隔