長沙房產(chǎn)交易中心官網(wǎng)丹東網(wǎng)站seo
防抖(debounce)和節(jié)流(throttle)是JavaScript中常用的性能優(yōu)化技術(shù),用于限制某些高頻率觸發(fā)的函數(shù)執(zhí)行次數(shù),減少不必要的計算和網(wǎng)絡(luò)請求。下面分別介紹防抖和節(jié)流的實(shí)現(xiàn)方式。
防抖(Debounce)
防抖的原理是在事件觸發(fā)后等待一段時間,如果在這段時間內(nèi)沒有再次觸發(fā)該事件,就執(zhí)行函數(shù);如果再次觸發(fā)了該事件,則重新計時。這樣可以確保只有事件停止觸發(fā)后才會執(zhí)行函數(shù)。
?function debounce(func, delay) {let timer;return function() {const context = this;const args = arguments;clearTimeout(timer);timer = setTimeout(function() {func.apply(context, args);}, delay);};
}
使用示例:
// 定義一個需要防抖處理的函數(shù)
function search() {// 執(zhí)行搜索操作
}// 創(chuàng)建防抖函數(shù)
const debouncedSearch = debounce(search, 300);// 添加事件監(jiān)聽器
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", debouncedSearch);
當(dāng)用戶輸入搜索關(guān)鍵字時,會觸發(fā)input事件并調(diào)用debouncedSearch
函數(shù)。但由于應(yīng)用了防抖,只有在停止輸入300毫秒后才會實(shí)際執(zhí)行搜索操作。
節(jié)流(Throttle)
節(jié)流的原理是規(guī)定一個時間間隔,在這個時間間隔內(nèi),只能執(zhí)行一次函數(shù)。如果在該時間間隔內(nèi)多次觸發(fā)該函數(shù),只有第一次會被執(zhí)行,后續(xù)的觸發(fā)將被忽略。
function throttle(func, interval) {let lastTime = 0;return function() {const currentTime = Date.now();if (currentTime - lastTime > interval) {func.apply(this, arguments);lastTime = currentTime;}};
}
?使用示例:
// 定義一個需要節(jié)流處理的函數(shù)
function scrollHandler() {// 處理滾動事件
}// 創(chuàng)建節(jié)流函數(shù)
const throttledScroll = throttle(scrollHandler, 200);// 添加事件監(jiān)聽器
window.addEventListener("scroll", throttledScroll);
?當(dāng)用戶滾動頁面時,會觸發(fā)scroll事件并調(diào)用throttledScroll
函數(shù)。由于應(yīng)用了節(jié)流,每200毫秒才會實(shí)際處理一次滾動事件,減少了函數(shù)的觸發(fā)次數(shù)。