淺談JavaScript節(jié)流與防抖
節(jié)流與防抖
背景：當我們頻繁去請求資源、接口等其他的時候，就會造成操作Dom頻繁，接口壓力大等等，性能下降。比如我有時候會每次搜索會猛地敲回車，在網絡不很好的時候，點擊下一頁按鈕的時候也會一直點，可能網絡不好也可能服務器性能低。
為了避免頻繁觸發(fā)同一事件或請求，這時候就要用到節(jié)流和防抖了。
what？這是啥？當我第一次聽到這兩個名字的時候，心想是指節(jié)省流量、防止手抖嗎。百思不得其解，趕緊就去學習。
概念：
簡單來說：節(jié)流和防抖就是為了防止事件在短時間內多次觸發(fā)的兩種解決方案。都是用過減少請求的次數，來降低壓力，提高性能。
區(qū)別
節(jié)流：在一定的時間內只會請求一次。
可以理解為：公交車，每個人是一次點擊請求，每十分鐘開一趟車，發(fā)送請求
防抖：觸發(fā)事件后n秒后才能執(zhí)行函數，如果在n秒內觸發(fā)了事件，則會重新計算執(zhí)行時間。
比如在一段時間內，我一直點擊按鈕，以最后一次點擊為準發(fā)送一次請求。
節(jié)流實現(xiàn)
解決思路 ：
使用時間戳（發(fā)生在一段時間的開始），就是在計算
當前點擊的時間 - 上一次執(zhí)行函數的時間 > 我設定的時間戳 ，就執(zhí)行一次函數
缺點：第一次直接觸發(fā) 最后一次一段時間內無法觸發(fā)
給一個場景，當我們搜索數據的時候，發(fā)起請求，沒有做處理是這樣的，請求肯定太過于頻繁
節(jié)流函數
代碼：
<body>
<div>
<span>節(jié)流處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", throttle(output, 1000)) //添加點擊事件監(jiān)聽
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模擬發(fā)起一次請求
}
//節(jié)流函數
function throttle(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
var last = 0; //上一次結束的時間
return function () {
var cur = Date.now()
console.log(cur-last)
if (cur - last > delay) {
fn.apply(this, arguments) //執(zhí)行函數
last = cur //更新上一次時間
}
}
}
</script>
效果：
防抖實現(xiàn)
解決思路 ：
定時器（發(fā)生在定時結束）。缺點：第一次不觸發(fā) 最后一次延遲觸發(fā)
就是設置一個定時器，如果一直點擊則清除定時器，最后一次開啟定時器
防抖函數
代碼：
<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, 1000)) //添加點擊事件監(jiān)聽
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模擬發(fā)起一次請求
}
function debounce(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
var time = null; //定時器
return function () {
clearTimeout(time); //清除定時器
let context = this; //獲取當前button上下文 如果不指定，箭頭函數就會一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context, args);
}, delay);
}
}
</script>
效果：
防抖升級版
第一次觸發(fā)和最后一次延遲觸發(fā)
代碼：
function throttle(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
let time = null
let flag=true //標識是不是第一次觸發(fā)
return function () {
clearTimeout(time)
if (flag) {
fn.apply(this, arguments)
flag=false
}
time = setTimeout(() => { //觸發(fā)定時器
fn.apply(this, arguments)
flag=true
}, delay)
}
}
效果：
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
節(jié)流與防抖
背景：當我們頻繁去請求資源、接口等其他的時候，就會造成操作Dom頻繁，接口壓力大等等，性能下降。比如我有時候會每次搜索會猛地敲回車，在網絡不很好的時候，點擊下一頁按鈕的時候也會一直點，可能網絡不好也可能服務器性能低。
為了避免頻繁觸發(fā)同一事件或請求，這時候就要用到節(jié)流和防抖了。
what？這是啥？當我第一次聽到這兩個名字的時候，心想是指節(jié)省流量、防止手抖嗎。百思不得其解，趕緊就去學習。
概念：
簡單來說：節(jié)流和防抖就是為了防止事件在短時間內多次觸發(fā)的兩種解決方案。都是用過減少請求的次數，來降低壓力，提高性能。
區(qū)別
節(jié)流：在一定的時間內只會請求一次。
可以理解為：公交車，每個人是一次點擊請求，每十分鐘開一趟車，發(fā)送請求
防抖：觸發(fā)事件后n秒后才能執(zhí)行函數，如果在n秒內觸發(fā)了事件，則會重新計算執(zhí)行時間。
比如在一段時間內，我一直點擊按鈕，以最后一次點擊為準發(fā)送一次請求。
節(jié)流實現(xiàn)
解決思路 ：
使用時間戳（發(fā)生在一段時間的開始），就是在計算
當前點擊的時間 - 上一次執(zhí)行函數的時間 > 我設定的時間戳 ，就執(zhí)行一次函數
缺點：第一次直接觸發(fā) 最后一次一段時間內無法觸發(fā)
給一個場景，當我們搜索數據的時候，發(fā)起請求，沒有做處理是這樣的，請求肯定太過于頻繁
節(jié)流函數
代碼：
<body>
<div>
<span>節(jié)流處理</span><input id="input" type="text">
<button id="btn">請求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", throttle(output, 1000)) //添加點擊事件監(jiān)聽
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模擬發(fā)起一次請求
}
//節(jié)流函數
function throttle(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
var last = 0; //上一次結束的時間
return function () {
var cur = Date.now()
console.log(cur-last)
if (cur - last > delay) {
fn.apply(this, arguments) //執(zhí)行函數
last = cur //更新上一次時間
}
}
}
</script>
效果：
防抖實現(xiàn)
解決思路 ：
定時器（發(fā)生在定時結束）。缺點：第一次不觸發(fā) 最后一次延遲觸發(fā)
就是設置一個定時器，如果一直點擊則清除定時器，最后一次開啟定時器
防抖函數
代碼：
<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, 1000)) //添加點擊事件監(jiān)聽
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模擬發(fā)起一次請求
}
function debounce(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
var time = null; //定時器
return function () {
clearTimeout(time); //清除定時器
let context = this; //獲取當前button上下文 如果不指定，箭頭函數就會一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context, args);
}, delay);
}
}
</script>
效果：
防抖升級版
第一次觸發(fā)和最后一次延遲觸發(fā)
代碼：
function throttle(fn, delay) { // fn為執(zhí)行的函數，delay為延遲時間
let time = null
let flag=true //標識是不是第一次觸發(fā)
return function () {
clearTimeout(time)
if (flag) {
fn.apply(this, arguments)
flag=false
}
time = setTimeout(() => { //觸發(fā)定時器
fn.apply(this, arguments)
flag=true
}, delay)
}
}
效果：
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
- JavaScript函數防抖動debounce
- 通過實例講解JS如何防抖動
- JavaScript運動框架 解決防抖動問題、懸浮對聯(lián)(二)
- JavaScript中防抖和節(jié)流的區(qū)別及適用場景
- JavaScript中防抖和節(jié)流的實戰(zhàn)應用記錄
- JavaScript深入理解節(jié)流與防抖
- JavaScript防抖與節(jié)流的實現(xiàn)與注意事項
- JavaScript的防抖和節(jié)流一起來了解下
- JavaScript中函數的防抖與節(jié)流詳解
- javascript的防抖和節(jié)流你了解嗎
- 關于JavaScript防抖與節(jié)流的區(qū)別與實現(xiàn)
- JavaScript防抖與節(jié)流詳解
- JavaScript 防抖和節(jié)流詳解
- JavaScript防抖動與節(jié)流處理
相關文章
下面小編就為大家?guī)硪黄鶭S實現(xiàn)幾個常用DOM操作API實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
JavaScript中判斷變量是數組、函數或是對象類型的方法
這篇文章主要介紹了JavaScript中判斷變量是數組、函數或是對象類型的方法,需要的朋友可以參考下2015-02-02
js自己實現(xiàn)一個大文件切片上傳+斷點續(xù)傳的示例代碼
本文主要介紹了js自己實現(xiàn)一個大文件切片上傳+斷點續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
javascript函數的call、apply和bind的原理及作用詳解
javascript函數的call、apply和bind?本質是用來實現(xiàn)繼承的，專業(yè)點說法就是改變函數體內部this的指向，當一個對象沒有某個功能時，就可以用這3個來從有相關功能的對象里借用過來，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-05-05
本文主要介紹了javascript中的三種彈出對話框，分別是alert()方法，confirm()方法，prompt()方法，對javascript彈出對話框相關知識感興趣的朋友一起學習吧2016-03-03
淺談Sublime Text 3運行JavaScript控制臺
下面小編就為大家?guī)硪黄獪\談Sublime Text 3運行JavaScript控制臺。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
div+css模擬js信息框的類庫時遇到一個問題當沒有傳遞參數過去時自動使用提示信息作為窗口標題，具體的實現(xiàn)如下2014-02-02![我也種棵OO樹JXTree[js+css+xml]](http://img.jbzj.com/images/xgimg/bcimg7.png)
我也種棵OO樹JXTree[js+css+xml]...2007-04-04
這篇文章主要介紹了第二篇Bootstrap起步的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01