更新時間:2023-03-13 來源:黑馬程序員 瀏覽量:
防抖和節(jié)流是前端開發(fā)中常用的兩種性能優(yōu)化技術(shù)。
防抖 (Debouncing) 的含義是指在一定時間內(nèi),多次觸發(fā)同一個事件,只執(zhí)行最后一次操作。例如,當(dāng)我們在搜索框中輸入關(guān)鍵詞時,輸入框會不斷觸發(fā) oninput 事件,如果每次輸入都去請求服務(wù)器獲取數(shù)據(jù),會造成不必要的請求浪費。此時就可以使用防抖技術(shù),將一定時間內(nèi)的多次觸發(fā)合并為一次操作,只請求一次服務(wù)器數(shù)據(jù),減少了請求次數(shù)和服務(wù)器負(fù)載。
節(jié)流 (Throttling) 的含義是指在一定時間內(nèi),多次觸發(fā)同一個事件,只執(zhí)行第一次操作。例如,當(dāng)我們拖動網(wǎng)頁上的滾動條時,會不斷觸發(fā) onscroll 事件,如果每次觸發(fā)都去計算滾動距離,會造成瀏覽器性能下降。此時就可以使用節(jié)流技術(shù),將一定時間內(nèi)的多次觸發(fā)限制為一次操作,只計算一次滾動距離,提高了瀏覽器性能和用戶體驗。
下面是 JavaScript 中實現(xiàn)防抖和節(jié)流的代碼演示:
在防抖函數(shù)中,我們使用了閉包來保存定時器變量 timer 和傳入的函數(shù) func。每次觸發(fā)事件時,我們先清除之前的定時器,再設(shè)置一個新的定時器。如果在 delay 時間內(nèi)再次觸發(fā)事件,就會清除之前的定時器并設(shè)置一個新的定時器,直到 delay 時間內(nèi)不再觸發(fā)事件,定時器到達(dá)時間后執(zhí)行傳入的函數(shù) func。
function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用防抖優(yōu)化搜索框輸入 const searchInput = document.getElementById('search-input'); const searchBtn = document.getElementById('search-btn'); function search() { console.log('searching...'); // 發(fā)送請求獲取搜索結(jié)果 } searchInput.addEventListener('input', debounce(search, 500)); searchBtn.addEventListener('click', search);
function throttle(func, delay) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); } }; } // 使用節(jié)流優(yōu)化滾動事件 window.addEventListener('scroll', throttle(function() { console.log('scrolling...'); // 計算滾動距離 }, 500));
在節(jié)流函數(shù)中,我們同樣使用了閉包來保存定時器變量 timer 和傳入的函數(shù) func。每次觸發(fā)事件時,如果定時器不存在,就設(shè)置一個定時器,并在 delay 時間后執(zhí)行傳入的函數(shù) func。如果在 delay 時間內(nèi)再次觸發(fā)事件,由于定時器還存在,就不會執(zhí)行傳入的函數(shù) func。只有在 delay 時間后定時器到達(dá)時間后執(zhí)行傳入的函數(shù) func 并清除定時器。
在實際開發(fā)中,我們可以根據(jù)具體情況選擇使用防抖或節(jié)流來優(yōu)化性能,以提高用戶體驗和應(yīng)用性能。
猜你喜歡: