什么是防抖和節(jié)流?

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

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

　　節(jié)流 (Throttling) 的含義是指在一定時間內(nèi)，多次觸發(fā)同一個事件，只執(zhí)行第一次操作。例如，當我們拖動網(wǎng)頁上的滾動條時，會不斷觸發(fā) onscroll 事件，如果每次觸發(fā)都去計算滾動距離，會造成瀏覽器性能下降。此時就可以使用節(jié)流技術(shù)，將一定時間內(nèi)的多次觸發(fā)限制為一次操作，只計算一次滾動距離，提高了瀏覽器性能和用戶體驗。

　　下面是 JavaScript 中實現(xiàn)防抖和節(jié)流的代碼演示：

　　防抖

　　在防抖函數(shù)中，我們使用了閉包來保存定時器變量 timer 和傳入的函數(shù) func。每次觸發(fā)事件時，我們先清除之前的定時器，再設置一個新的定時器。如果在 delay 時間內(nèi)再次觸發(fā)事件，就會清除之前的定時器并設置一個新的定時器，直到 delay 時間內(nèi)不再觸發(fā)事件，定時器到達時間后執(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);

　　節(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)化滾動事件
window.addEventListener('scroll', throttle(function() {
  console.log('scrolling...');
  // 計算滾動距離
}, 500));

　　在節(jié)流函數(shù)中，我們同樣使用了閉包來保存定時器變量 timer 和傳入的函數(shù) func。每次觸發(fā)事件時，如果定時器不存在，就設置一個定時器，并在 delay 時間后執(zhí)行傳入的函數(shù) func。如果在 delay 時間內(nèi)再次觸發(fā)事件，由于定時器還存在，就不會執(zhí)行傳入的函數(shù) func。只有在 delay 時間后定時器到達時間后執(zhí)行傳入的函數(shù) func 并清除定時器。

　　在實際開發(fā)中，我們可以根據(jù)具體情況選擇使用防抖或節(jié)流來優(yōu)化性能，以提高用戶體驗和應用性能。

猜你喜歡：

怎樣給微信小程序添加體驗版本？

如何創(chuàng)建Vue項目和啟動項目服務？

前端開發(fā)好學嗎？培訓一般要多長時間？

前端自學Java要多久?

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

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