防抖和節(jié)流是前端開發(fā)中常用的兩種性能優(yōu)化技術(shù)。

　　防抖 (Debouncing) 的含義是指在一定時(shí)間內(nèi)，多次觸發(fā)同一個(gè)事件，只執(zhí)行最后一次操作。例如，當(dāng)我們?cè)谒阉骺蛑休斎腙P(guān)鍵詞時(shí)，輸入框會(huì)不斷觸發(fā) oninput 事件，如果每次輸入都去請(qǐng)求服務(wù)器獲取數(shù)據(jù)，會(huì)造成不必要的請(qǐng)求浪費(fèi)。此時(shí)就可以使用防抖技術(shù)，將一定時(shí)間內(nèi)的多次觸發(fā)合并為一次操作，只請(qǐng)求一次服務(wù)器數(shù)據(jù)，減少了請(qǐng)求次數(shù)和服務(wù)器負(fù)載。

　　節(jié)流 (Throttling) 的含義是指在一定時(shí)間內(nèi)，多次觸發(fā)同一個(gè)事件，只執(zhí)行第一次操作。例如，當(dāng)我們拖動(dòng)網(wǎng)頁(yè)上的滾動(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ù)中，我們使用了閉包來(lái)保存定時(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ā)送請(qǐng)求獲取搜索結(jié)果
}
searchInput.addEventListener('input', debounce(search, 500));
searchBtn.addEventListener('click', search);

　　節(jié)流

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ù)中，我們同樣使用了閉包來(lái)保存定時(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é)流來(lái)優(yōu)化性能，以提高用戶體驗(yàn)和應(yīng)用性能。

猜你喜歡：

怎樣給微信小程序添加體驗(yàn)版本？

如何創(chuàng)建Vue項(xiàng)目和啟動(dòng)項(xiàng)目服務(wù)？

前端開發(fā)好學(xué)嗎？培訓(xùn)一般要多長(zhǎng)時(shí)間？

前端自學(xué)Java要多久?

什么是Node.js？Node.js有哪些組成部分？

Vue相比Angular和React有哪些優(yōu)勢(shì)？