防抖（Debounce）和節(jié)流（Throttle）都是用來優(yōu)化函數(shù)執(zhí)行頻率的技術(shù)哩俭，特別在處理用戶輸入、滾動等頻繁觸發(fā)的情況下触趴，它們可以有效減少函數(shù)的執(zhí)行次數(shù)氮发，從而提升性能和用戶體驗(yàn)。但它們的工作方式和應(yīng)用場景有所不同冗懦。
1.防抖（Debounce）
防抖的主要思想是爽冕，當(dāng)持續(xù)觸發(fā)事件時，在事件最后一次觸發(fā)之后披蕉，只有等待一段時間沒有觸發(fā)新事件颈畸，才會執(zhí)行函數(shù)。簡言之嚣艇，防抖是將多次高頻觸發(fā)的事件合并成一次執(zhí)行承冰。
應(yīng)用場景：適用于輸入框輸入华弓、搜索框自動聯(lián)想等情況食零。例如，在用戶輸入過程中寂屏，只在用戶停止輸入后的一段時間內(nèi)才觸發(fā)搜索操作贰谣。
2.節(jié)流（Throttle）
節(jié)流的思想是，當(dāng)持續(xù)觸發(fā)事件時迁霎，保證在一定時間間隔內(nèi)執(zhí)行一次函數(shù)吱抚。即使在該時間間隔內(nèi)觸發(fā)了多次事件，也只會執(zhí)行一次函數(shù)考廉。
應(yīng)用場景：適用于滾動加載秘豹、頁面滾動等情況。例如昌粤，在頁面滾動過程中既绕，只在一段時間間隔內(nèi)觸發(fā)一次加載更多的操作。
防抖實(shí)現(xiàn)示例：
// pages/index/index.js
Page({
debounceInput: function (e) {
const value = e.detail.value;
this.debouncedSearch(value);
},
onLoad: function () {
this.debouncedSearch = this.debounce(this.search, 300);
},
debounce: function (func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
},
search: function (value) {
console.log("Searching for:", value);
// 實(shí)際的搜索操作
},
});
在這個示例中涮坐，我們使用了防抖技術(shù)來處理用戶在輸入框輸入時的搜索操作凄贩。在 onLoad 階段，我們創(chuàng)建了一個名為 debouncedSearch 的防抖函數(shù)袱讹，將實(shí)際的搜索操作 search 作為參數(shù)傳遞給它疲扎。當(dāng)用戶輸入時，會觸發(fā) debounceInput 函數(shù)，它會調(diào)用 debouncedSearch 來觸發(fā)搜索操作椒丧，但只有在用戶停止輸入一段時間后才會真正執(zhí)行搜索壹甥。
節(jié)流實(shí)現(xiàn)示例：
// pages/index/index.js
Page({
throttleScroll: function (e) {
this.throttledLoadMore();
},
onLoad: function () {
this.throttledLoadMore = this.throttle(this.loadMore, 1000);
},
throttle: function (func, delay) {
let lastTime = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
},
loadMore: function () {
console.log("Loading more data...");
// 實(shí)際的加載更多操作
},
});
在這個示例中，我們使用了節(jié)流技術(shù)來處理頁面滾動時的加載更多操作瓜挽。在 onLoad 階段盹廷，我們創(chuàng)建了一個名為 throttledLoadMore 的節(jié)流函數(shù)，將實(shí)際的加載更多操作 loadMore 作為參數(shù)傳遞給它久橙。當(dāng)頁面滾動時俄占，會觸發(fā) throttleScroll 函數(shù)，它會調(diào)用 throttledLoadMore 來觸發(fā)加載更多操作淆衷，但只會在一定時間間隔內(nèi)執(zhí)行一次缸榄。
