JavaScript防抖與節(jié)流有哪些最佳實(shí)踐

在 JavaScript 中，防抖（debounce）和節(jié)流（throttle）是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以提高性能，但應(yīng)用場景和實(shí)現(xiàn)方式有所不同。以下是一些關(guān)于防抖和節(jié)流的最佳實(shí)踐：

防抖（Debounce）

防抖的核心思想是在事件被連續(xù)觸發(fā)后，只執(zhí)行最后一次觸發(fā)的操作。適用于如輸入框?qū)崟r(shí)搜索、窗口大小調(diào)整等場景。

最佳實(shí)踐：

1. 使用閉包來保持函數(shù)狀態(tài)。
2. 在防抖函數(shù)內(nèi)部，先執(zhí)行一次目標(biāo)函數(shù)，然后設(shè)置一個(gè)定時(shí)器，在定時(shí)器回調(diào)中執(zhí)行目標(biāo)函數(shù)。
3. 如果在這段間隔時(shí)間內(nèi)，事件再次被觸發(fā)，則重新設(shè)置定時(shí)器。
4. 當(dāng)不再觸發(fā)事件時(shí)，定時(shí)器會(huì)完成執(zhí)行，目標(biāo)函數(shù)最終會(huì)被調(diào)用。

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

節(jié)流（Throttle）

節(jié)流的核心思想是在一段固定的時(shí)間內(nèi)，只執(zhí)行一次目標(biāo)函數(shù)。適用于如滾動(dòng)加載、鼠標(biāo)移動(dòng)等場景。

最佳實(shí)踐：

1. 使用閉包來保持函數(shù)狀態(tài)。
2. 在節(jié)流函數(shù)內(nèi)部，先執(zhí)行一次目標(biāo)函數(shù)，然后設(shè)置一個(gè)定時(shí)器，在定時(shí)器回調(diào)中執(zhí)行目標(biāo)函數(shù)。
3. 如果在這段間隔時(shí)間內(nèi)，事件再次被觸發(fā)，則不做任何操作，等待下一個(gè)時(shí)間間隔。
4. 當(dāng)定時(shí)器完成執(zhí)行后，目標(biāo)函數(shù)會(huì)被調(diào)用。

function throttle(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const context = this;
    const nowTime = Date.now();
    if (nowTime - lastTime > wait) {
      func.apply(context, args);
      lastTime = nowTime;
    }
  };
}

結(jié)合使用

在某些場景下，可以將防抖和節(jié)流結(jié)合使用，以達(dá)到更好的性能優(yōu)化效果。例如，在滾動(dòng)加載時(shí)，可以使用節(jié)流來控制觸發(fā)頻率，而在輸入框?qū)崟r(shí)搜索時(shí)，可以使用防抖來確保只在用戶停止輸入一段時(shí)間后才執(zhí)行搜索操作。

注意事項(xiàng)

1. 在選擇防抖還是節(jié)流時(shí)，要根據(jù)具體場景和需求來判斷。
2. 在實(shí)現(xiàn)防抖和節(jié)流時(shí)，要注意避免引入額外的性能開銷，如過多的閉包和定時(shí)器。
3. 在處理異步操作時(shí)，要確保防抖和節(jié)流函數(shù)能夠正確處理返回值和錯(cuò)誤。