淺談JavaScript節流與防抖
目錄
- 節流與防抖
- 概念：
- 區別
- 節流實現
- 節流函式
- 防抖實現
- 防抖函式
- 防抖升級版
- 總結
- 節流與防抖
- 概念：
- 區別
- 節流實現
- 節流函式
- 防抖實現
- 防抖函式
- 防抖升級版
- 總結
節流與防抖
背景：當我們頻繁去請求資源、介面等其他的時候，就會造成操作Dom頻繁，介面壓力大等等，效能下降。比如我有時候會每次搜尋會猛地敲回車，在網路不很好的時候，點選下一頁按鈕的時候也會一直點，可能網路不好也可能伺服器效能低。
為了避免頻繁觸發同一事件或請求，這時候就要用到節流和防抖了。
what？這是啥？當我第一次聽到這兩個名字的時候，心想是指節省流量、防止手抖嗎。百思不得其解，趕緊就去學習。
概念：
簡單來說：節流和防抖就是為了防止事件在短時間內多次觸發的兩種解決方案。都是用過減少請求的次數，來降低壓力，提高效能。
區別
節流：在一定的時間內只會請求一次。
可以理解為：公交車，每個人是一次點選請求，每十分鐘開一趟車，傳送請求
防抖：觸發事件後n秒後才能執行函式，如果在n秒內觸發了事件，則會重新計算執行時間。
比如在一段時間內，我一直點選按鈕，以最後一次點選為準傳送一次請求。
節流實現
解決思路 ：
使用時間戳（發生在一段時間的開始），就是在計算
當前點選的時間 - 上一次執行函式的時間 > 我設定的時間戳 ，就執行一次函式
缺點：第一次直接觸發 最後一次一段時間內無法觸發
給一個場景，當我們搜尋資料的時候，發起請求，沒有做處理是這樣的，請求肯定太過於頻繁
節流函式
程式碼：
<body>
<div>
<span>節流處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click",throttle(output,1000)) //新增點選事件監聽
function output(e) {
console.log(this,e)
console.log(document.getElementById("input").value) //模擬發起一次請求
}
//節流函式
function throttle(fn,delay) { 效果：
防抖實現
解決思路 ：
定時器（發生在定時結束）。缺點：第一次不觸發 最後一次延遲觸發
就是設定一個定時器，如果一直點選則清除定時器，最後一次開啟定時器
防抖函式
程式碼：
<body>
<div>
<span>防抖處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click",debounce(output,e)
console.log(document.getElementById("input").value) //模擬發起一次請求
}
function debounce(fn,delay) { // fn為執行的函式，delay為延遲時間
var time = null; //定時器
return function () {
clearTimeout(tihttp://www.cppcns.comme); //清除定時器
let context = this; //獲取當前button上下文 如果不指定，箭頭函式就會一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context,args);
},delay);
}
}
</script>
效果：
防抖升級版
第一次觸發和最後一次延遲觸發
程式碼：
function throttle(fn,delay) { // fn為執行的函式，delay為延遲時間
let time = null
let flag=true //標識是不是第一次觸發
return function () {
clearTimeout(time)
if (flag) {
fn.apply(this,arguments)
flag=false
}
time = setTimeout(() => { //觸發定時器
fn.apply(this,arguments)
flag=true
},delay)
}
}
效果：
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!
節流與防抖
背景：當我們頻繁去請求資源、介面等其他的時候，就會造成操作Dom頻繁，介面壓力大等等，效能下降。比如我有時候會每次搜尋會猛地敲回車，在網路不很好的時候，點選下一頁按鈕的時候也會一直點，可能網路不好也可能伺服器效能低。
為了避免頻繁觸發同一事件或請求，這時候就要用到節流和防抖了。
what？這是啥？當我第一次聽到這兩個名字的時候，心想是指節省流量、防止手抖嗎。百思不得其解，趕緊就去學習。
概念：
簡單來說：節流和防抖就是為了防止事件在短時間內多次觸發的兩種解決方案。都是用過減少請求的次數，來降低壓力，提高效能。
區別
節流：在一定的時間內只會請求一次。
可以理解為：公交車，每個人是一次點選請求，每十分鐘開一趟車，傳送請求
防抖：觸發事件後n秒後才能執行函式，如果在n秒內觸發了事件，則會重新計算執行時間。
比如在一段時間內，我一直點選按鈕，以最後一次點選為準傳送一次請求。
節流實現
解決思路 ：
使用時間戳（發生在一段時間的開始），就是在計算
當前點選的時間 - 上一次執行函式的時間 > 我設定的時間戳 ，就執行一次函式
缺點：第一次直接觸發 最後一次一段時間內無法觸發
給一個場景，當我們搜尋資料的時候，發起請求，沒有做處理是這樣的，請求肯定太過於頻繁
節流函式
程式碼：
<body>
<div>
<span>節流處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click",delay) { // fn為執行的函式，delay為延遲時間
var last = 0; //上一次結束的時間
return function () {
var cur = Date.now()
console.log(cur-last)
if (cur - last > delay) {
fn.apply(this,arguments) //執行函式
last = cur //更新上一次時間
http://www.cppcns.com }
}
}
</script>
效果：
防抖實現
解決思路 ：
定時器（發生在定時結束）。缺點：第一次不觸發 最後一次延遲觸發
就是設定一個定時器，如果一直點選則清除定時器，最後一次開啟定時器
防抖函式
程式碼：
<body>
<div>
<span>防抖處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click",delay) { // fn為執行的函式，delay為延遲時間
var time = null; //定時器
return function () {
clearTimeout(time); //清除定時器
let context = this; //獲取當前button上下文 如果不指定，箭頭函式就會一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context,delay);
}
}
</script>
效果：
防抖升級版
第一次觸發和最後一次延遲觸發
程式碼：
function throttle(fn,delay)
}
}
效果：
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!