防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù)箩艺，今天我就來(lái)總結(jié)一下什么是防抖和節(jié)流，并詳細(xì)說(shuō)明一下如何在工作中應(yīng)用防抖和節(jié)流函數(shù)
什么是防抖和節(jié)流?
在 JavaScript 中扒怖，防抖（debounce）和節(jié)流（throttle）是用來(lái)限制函數(shù)執(zhí)行頻率的兩種常見(jiàn)技術(shù)。
防抖（debounce） 是指在某個(gè)時(shí)間段內(nèi)狐蜕，只執(zhí)行最后一次觸發(fā)的函數(shù)調(diào)用煞聪。如果在這個(gè)時(shí)間段內(nèi)再次觸發(fā)該函數(shù)，會(huì)重新計(jì)時(shí)膊夹，直到等待時(shí)間結(jié)束才會(huì)執(zhí)行函數(shù)衬浑。
這個(gè)技術(shù)通常用于處理頻繁觸發(fā)的事件，比如窗口大小調(diào)整放刨、搜索框輸入等工秩。防抖可以避免函數(shù)執(zhí)行過(guò)多次，以減少網(wǎng)絡(luò)開(kāi)銷和性能負(fù)擔(dān)进统。
節(jié)流（throttle） 是指在一段時(shí)間內(nèi)限制函數(shù)的執(zhí)行頻率助币，保證一定時(shí)間內(nèi)只執(zhí)行一次函數(shù)調(diào)用。無(wú)論觸發(fā)頻率多高螟碎，都會(huì)在指定時(shí)間間隔內(nèi)執(zhí)行一次函數(shù)眉菱。
這個(gè)技術(shù)通常用于處理連續(xù)觸發(fā)的事件，比如滾動(dòng)事件掉分、鼠標(biāo)移動(dòng)事件等俭缓。節(jié)流可以控制函數(shù)的執(zhí)行頻率克伊，以減少資源消耗和提高性能。
手寫一個(gè)防抖的工具函數(shù)
function debounce(func, delay) {
let timeoutId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
函數(shù)說(shuō)明
- 這個(gè)防抖函數(shù)接受兩個(gè)參數(shù)：
func表示需要進(jìn)行防抖的函數(shù)华坦，delay表示延遲的時(shí)間間隔（以毫秒為單位） - 函數(shù)內(nèi)部使用了一個(gè)
timeoutId變量來(lái)保存定時(shí)器的標(biāo)識(shí)愿吹。當(dāng)調(diào)用防抖函數(shù)返回的新函數(shù)時(shí)，會(huì)清除之前的定時(shí)器季春，并設(shè)置一個(gè)新的定時(shí)器洗搂。只有在延遲時(shí)間內(nèi)沒(méi)有再次調(diào)用該新函數(shù)時(shí)，才會(huì)觸發(fā)最終的函數(shù)執(zhí)行
使用示例
該示例表示在全局滾動(dòng)事件中使用防抖函數(shù)载弄，每200毫秒內(nèi)如果觸發(fā)滾動(dòng)事件耘拇，那么不會(huì)執(zhí)行handleScroll()函數(shù)。
然后重新計(jì)時(shí)200毫秒宇攻，再次判斷惫叛，直到最后一個(gè)200毫秒內(nèi)沒(méi)有觸發(fā)滾動(dòng)事件，才會(huì)執(zhí)行handleScroll()函數(shù)
function handleScroll() {
console.log('Scrolled');
}
const debouncedScroll = debounce(handleScroll, 200);
window.addEventListener('scroll', debouncedScroll);
手寫一個(gè)節(jié)流的工具函數(shù)
function throttle(func, delay) {
let timeoutId;
let lastExecTime = 0;
return function(...args) {
const currentTime = Date.now();
const remainingTime = delay - (currentTime - lastExecTime);
clearTimeout(timeoutId);
if (remainingTime <= 0) {
func.apply(this, args);
lastExecTime = currentTime;
} else {
timeoutId = setTimeout(() => {
func.apply(this, args);
lastExecTime = Date.now();
}, remainingTime);
}
};
}
函數(shù)說(shuō)明
- 這個(gè)節(jié)流函數(shù)接受兩個(gè)參數(shù)：
func是要執(zhí)行的函數(shù)逞刷，delay是延遲時(shí)間（以毫秒為單位） - 它返回一個(gè)新的函數(shù)嘉涌，該函數(shù)在調(diào)用時(shí)會(huì)根據(jù)指定的延遲時(shí)間來(lái)限制原始函數(shù)的執(zhí)行頻率
使用示例
在全局滾動(dòng)事件中使用節(jié)流函數(shù)，無(wú)論在滾動(dòng)事件的監(jiān)聽(tīng)過(guò)程中夸浅，觸發(fā)了幾次handleScroll()函數(shù)仑最，都只會(huì)在每200毫秒內(nèi)執(zhí)行一次handleScroll()函數(shù)。
function handleScroll() {
console.log('Scrolled');
}
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener('scroll', throttledScroll);
如何在工作中應(yīng)用防抖和節(jié)流
防抖和節(jié)流主要應(yīng)用于：搜索框輸入事件監(jiān)聽(tīng)帆喇、窗口大小調(diào)整事件監(jiān)聽(tīng)警医、按鈕點(diǎn)擊事件監(jiān)聽(tīng)、滾動(dòng)事件監(jiān)聽(tīng)坯钦、鼠標(biāo)移動(dòng)事件監(jiān)聽(tīng)等等場(chǎng)景预皇。
工作中哪些場(chǎng)景可以使用防抖函數(shù)？
- 用戶輸入： 當(dāng)用戶在表單輸入框中頻繁輸入時(shí)婉刀，可以使用防抖函數(shù)來(lái)延遲處理用戶輸入吟温，避免頻繁的請(qǐng)求或操作，提高性能和用戶體驗(yàn)突颊。
- 搜索框： 在搜索框中鲁豪，當(dāng)用戶連續(xù)輸入關(guān)鍵字時(shí)，可以使用防抖函數(shù)來(lái)延遲發(fā)送搜索請(qǐng)求律秃，以避免請(qǐng)求過(guò)多呈昔。
- 窗口調(diào)整： 當(dāng)窗口大小調(diào)整時(shí)，會(huì)觸發(fā)resize事件友绝，可以使用防抖函數(shù)來(lái)限制resize事件的觸發(fā)次數(shù)堤尾，避免頻繁執(zhí)行調(diào)整相關(guān)的代碼。
- 按鈕頻繁點(diǎn)擊： 當(dāng)按鈕被頻繁點(diǎn)擊時(shí)迁客，可以使用防抖函數(shù)來(lái)限制按鈕點(diǎn)擊的觸發(fā)次數(shù)郭宝。
工作中哪些場(chǎng)景可以使用節(jié)流函數(shù)辞槐？
- 用戶輸入： 當(dāng)用戶在文本框中輸入時(shí)，觸發(fā)搜索功能粘室。使用節(jié)流函數(shù)可以限制搜索請(qǐng)求的頻率榄檬，以避免頻繁的網(wǎng)絡(luò)請(qǐng)求。例如衔统，可以設(shè)置一個(gè)定時(shí)器鹿榜，在用戶輸入后的一小段時(shí)間內(nèi)不觸發(fā)搜索請(qǐng)求，只在定時(shí)器結(jié)束后才進(jìn)行搜索锦爵。
- 無(wú)限加載： 當(dāng)用戶滾動(dòng)頁(yè)面時(shí)舱殿，觸發(fā)加載更多數(shù)據(jù)的操作。使用節(jié)流函數(shù)可以限制加載操作的頻率险掀，以提高頁(yè)面的響應(yīng)性能沪袭。例如，可以設(shè)置一個(gè)定時(shí)器樟氢，在用戶滾動(dòng)過(guò)程中只觸發(fā)加載操作的最后一次滾動(dòng)事件冈绊。
- 按鈕頻繁點(diǎn)擊： 當(dāng)用戶頻繁點(diǎn)擊某個(gè)按鈕時(shí)，觸發(fā)某個(gè)操作埠啃。使用節(jié)流函數(shù)可以限制點(diǎn)擊操作的頻率死宣，以避免重復(fù)操作或者混亂的界面狀態(tài)。例如碴开，可以設(shè)置一個(gè)定時(shí)器毅该，在用戶點(diǎn)擊后的一小段時(shí)間內(nèi)不觸發(fā)重復(fù)操作。
如何使用loadsh.js工具庫(kù)中的防抖和節(jié)流函數(shù)
實(shí)際開(kāi)發(fā)過(guò)程中叹螟，我們的項(xiàng)目中可能會(huì)直接使用loadsh.js工具庫(kù)，來(lái)避免重復(fù)造輪子台盯，所以這里也特地說(shuō)明一下如何使用loadsh.js工具庫(kù)中的防抖和節(jié)流函數(shù)
- 安裝
loadsh.js工具庫(kù)
npm install lodash
- 在項(xiàng)目中引入
loadsh.js工具庫(kù)罢绽，不同前端項(xiàng)目引入方式不同，請(qǐng)自行鑒別
import { debounce, throttle } from 'loadsh';
- 使用防抖函數(shù)静盅，該示例中良价，
submitData()函數(shù)被限制為每1秒只會(huì)執(zhí)行最后一次，如果在等待時(shí)間內(nèi)多次調(diào)用該函數(shù)蒿叠，則會(huì)重置1秒的等待時(shí)間
// 定義要延遲執(zhí)行的函數(shù)
function submitData(data) {
console.log('保存數(shù)據(jù)：', data);
}
// 使用debounce函數(shù)創(chuàng)建一個(gè)延遲執(zhí)行的函數(shù)
const debouncedFn = _.debounce(submitData, 1000);
// 模擬連續(xù)觸發(fā)保存數(shù)據(jù)的操作
// 等待1秒后明垢，只會(huì)執(zhí)行最后一次保存數(shù)據(jù)的操作
debouncedFn('數(shù)據(jù)1'); // 不會(huì)輸出
debouncedFn('數(shù)據(jù)2'); // 不會(huì)輸出
debouncedFn('數(shù)據(jù)3'); // 輸出 —— 保存數(shù)據(jù)：數(shù)據(jù)3
- 使用節(jié)流函數(shù)，該示例中市咽，
throttledFn()函數(shù)被限制為每秒只能執(zhí)行一次痊银，如果在等待時(shí)間內(nèi)多次調(diào)用該函數(shù)，則不會(huì)執(zhí)行
// 定義要減少調(diào)用次數(shù)的函數(shù)
function fetchData(data) {
console.log('拉取數(shù)據(jù):', data);
}
// 使用throttle函數(shù)創(chuàng)建一個(gè)定時(shí)執(zhí)行的函數(shù)
const throttledFn = _.throttle(fetchData, 2000);
// 調(diào)用throttledFn函數(shù)
throttledFn('數(shù)據(jù)1'); // 輸出 —— 拉取數(shù)據(jù): 數(shù)據(jù)1
// 在1秒內(nèi)多次調(diào)用throttledFn函數(shù)
throttledFn('數(shù)據(jù)2'); // 不會(huì)輸出
// 2秒后再次調(diào)用throttledFn函數(shù)
setTimeout(() => {
throttledFn('數(shù)據(jù)3'); // 輸出 —— 拉取數(shù)據(jù): 數(shù)據(jù)3
}, 1000);
我是 fx67ll.com施绎，如果您發(fā)現(xiàn)本文有什么錯(cuò)誤溯革，歡迎在評(píng)論區(qū)討論指正贞绳，感謝您的閱讀！
如果您喜歡這篇文章致稀，歡迎訪問(wèn)我的 本文github倉(cāng)庫(kù)地址冈闭，為我點(diǎn)一顆Star，Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址抖单，非常感謝Ｎ堋！矛绘！
