防抖節流個人看法講解
一、對防抖節流的認知
我以為的防抖節流：
實際上的防抖節流：
詳細請往下看
二、我開始正經了
-------------------防抖 -------------------
首先先看一個問題：
公司給了一個電商里一個搜索框的小模塊，需求：
1.用戶輸入關鍵詞
2.系統給出推薦的相關商品
解決思路：簡單，一個輸入框加一個oninput事件，事件里執行推薦操作不就搞定啦？錯錯錯！如果你是這樣想的，你會得到下面的效果：
你會發現，用戶每輸入一個字你就進行一次處理，我這里舉例用的是簡單的console.log(this.value + "爆款");，正常寫專案里，你肯定要向后臺發請求拿到資料庫里的推薦吧？用戶每輸入一個字你就發一次請求，以這個頻率發請求，一秒鐘發7、8次，呵呵~你等著唄管后臺的同事罵吧你，
來了來了 防抖來了
防抖思路：設定一個定時器，讓用戶停止輸入 后一定時間才執行推薦操作（發請求）
具體實作：
1.用戶首次向input輸入框進行輸入,設定一個定時器：1000毫秒后輸出推薦用戶的商品
2.1000毫秒以內用戶再次向input輸入框進行輸入,刪掉之前的定時器，重新設定一個新的定時器：開始重新計時
3.當前時間距離用戶最后一次觸發事件的間隔時間達到 特定值（假設是1000毫秒）時,開始執行處理程式：也就是輸出推薦用戶的商品選擇，
代碼實作：
首先把用戶停止輸入后，系統執行的推薦操作寫好
// 創建一個函式：用于向用戶推薦商品
function recommend(){
//這里做的事情就是：用戶輸入關鍵字，系統想用戶推薦可能的商品
console.log(this.value); //此處的this指向input
console.log(this.value + "男款");
console.log(this.value + "爆款");
}
然后寫一個封裝好的防抖函式
//防抖函式 ：作用，為函式添加防抖功能
function debounce(fn, delay) {
let timer
//回傳一個函式
return function () {
if (timer) {
//不斷的清除定時器，一直到停留間隔達到1秒
clearTimeout(timer)
}
//設定一個定時器
timer = setTimeout(() => {
fn.call(this)
}, 1000)
}
}
最后把前面推薦操作函式，放到防抖函式里執行即可，全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" >
<script>
// 1.拿到input輸入框
const input = document.querySelector('input')
// 2.給input系結事件
// 創建一個函式：用于向用戶推薦商品
function recommend(){
//這里做的事情就是：用戶輸入關鍵字，系統想用戶推薦可能的商品
console.log(this.value); //此處的this指向input
console.log(this.value + "男款");
console.log(this.value + "爆款");
}
input.oninput = debounce(recommend,1000)
//防抖函式 ：作用，為函式添加防抖功能
function debounce(fn, delay) {
let timer
//回傳一個函式
return function () {
if (timer) {
//不斷的清除定時器，一直到停留間隔達到1秒
clearTimeout(timer)
}
//設定一個定時器
timer = setTimeout(() => {
fn.call(this)
}, 1000)
}
}
</script>
</body>
</html>
實作效果：
到這里你可能會是這種狀態
當然，初級的防抖就是差不多這樣的原理了，還有其它不用定時器的方法，不過也大同小異了，注意！！！是初級，實際開發中要注意的地方還多著呢，
三、節流
防抖，我知道了，節流又是個什么玩意呢？別急，慢慢聽我解釋，
前面防抖是為了防止用戶還沒輸入結束（事件終止）就發送請求，造成資源浪費，
這里節流除了擔心用戶還沒輸入結束（事件終止）就發送請求之外，還擔心某些用戶一直不終止動作，導致我們一直不能執行下一步操作發送請求，很被動很笨的呀，你懂不懂
這里有個例子更適合解釋節流：滑鼠滑輪在瀏覽器上滾動
你會發現，你輕輕滾一下滑輪，起碼觸發了十幾次事件，你一直滾個不停，它就一直不發請求，很不合理，往常都是滾一下動一下的，到你這還得蓄力了？
特別是某些人就有習慣，他就喜歡一直滾著滑輪，一個勁的滾，滾個不停，咋了，這時候你還能打電話叫他慢點？
加上防抖之后，他不停下來你就發不了請求，咋辦?這里更簡單，直接給他弄個定時器，一秒鐘后執行就好了，一秒后不管是不是還在滾動，都執行操作，
還是一樣的味道
首先封裝一個節流函式
function throttle(fn, delay) {
let flag = true
return function () {
if (flag) {
setTimeout(() => {
fn()
// 設定flag為true
flag = true
}, delay)
}
flag = false
}
}
再寫一個對用戶操作后的處理函式
function () {
console.log('我滾動了滑輪');
}
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 10000px;
}
</style>
</head>
<body>
<script>
window.onscroll = throttle(function () {
console.log('我滾動了滑輪');
},1000)
function throttle(fn, delay) {
let flag = true
return function () {
if (flag) {
setTimeout(() => {
fn()
// 設定flag為true
flag = true
}, delay)
}
flag = false
}
}
</script>
</body>
</html>
效果：
四、總結
防抖：高頻觸發事件，只要最后一次事件處理程式內部的執行成果
節流：控制高頻事件的觸發次數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303899.html
標籤：其他
下一篇：產品經理：你能不能讓詞云動起來？