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