前言

函數(shù)防抖(Debounce)是JavaScript中一種常用的性能優(yōu)化技術(shù)，主要用于控制函數(shù)執(zhí)行的頻率。

什么是函數(shù)防抖？

函數(shù)防抖是指在一定時(shí)間間隔內(nèi)，如果事件被連續(xù)觸發(fā)，則只執(zhí)行最后一次觸發(fā)的事件處理函數(shù)。簡(jiǎn)單來說，就是讓一個(gè)函數(shù)在一定時(shí)間內(nèi)只執(zhí)行一次。

實(shí)現(xiàn)原理

函數(shù)防抖的核心原理是使用定時(shí)器(setTimeout)來延遲函數(shù)的執(zhí)行：

1. 當(dāng)事件觸發(fā)時(shí)，清除之前的定時(shí)器
2. 設(shè)置一個(gè)新的定時(shí)器
3. 如果在定時(shí)器到期前事件再次被觸發(fā)，則重復(fù)上述過程
4. 只有當(dāng)事件停止觸發(fā)一段時(shí)間后，函數(shù)才會(huì)真正執(zhí)行

應(yīng)用場(chǎng)景

1. 搜索框輸入聯(lián)想(避免每次輸入都發(fā)送請(qǐng)求)
2. 窗口大小調(diào)整事件
3. 滾動(dòng)事件處理
4. 表單驗(yàn)證(在用戶停止輸入后進(jìn)行驗(yàn)證)

基礎(chǔ)實(shí)現(xiàn)

function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

這是一個(gè)基本的防抖函數(shù)實(shí)現(xiàn)，接收要執(zhí)行的函數(shù)和延遲時(shí)間作為參數(shù)。

進(jìn)階實(shí)現(xiàn)(立即執(zhí)行版本)

 debounce(func, delay, immediate) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    
    if (timer) clearTimeout(timer);
    
    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (callNow) func.apply(context, args);
    } else {
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    }
  };
}

這個(gè)版本增加了立即執(zhí)行選項(xiàng)，第一次觸發(fā)會(huì)立即執(zhí)行函數(shù)。

使用示例

// 搜索框輸入防抖
const searchInput = document.getElementById('search');
const searchHandler = debounce(function() {
  console.log('搜索:', this.value);
  // 這里可以添加實(shí)際的搜索邏輯
}, 500);

searchInput.addEventListener('input', searchHandler);

// 窗口大小調(diào)整防抖
const resizeHandler = debounce(function() {
  console.log('窗口大小已調(diào)整');
}, 200);

window.addEventListener('resize', resizeHandler);

注意事項(xiàng)

1. 防抖時(shí)間間隔需要根據(jù)實(shí)際場(chǎng)景合理設(shè)置
2. 對(duì)于需要立即反饋的操作(如按鈕點(diǎn)擊)，不適合使用防抖
3. 防抖函數(shù)會(huì)延遲執(zhí)行，可能導(dǎo)致用戶體驗(yàn)上的延遲感

函數(shù)防抖是前端性能優(yōu)化的重要手段，合理使用可以顯著提升頁面性能。

函數(shù)防抖和函數(shù)節(jié)流有什么區(qū)別？

函數(shù)防抖（Debounce）和函數(shù)節(jié)流（Throttle）是前端開發(fā)中兩種常用的性能優(yōu)化技術(shù)，用于控制高頻觸發(fā)事件的執(zhí)行頻率。雖然兩者都旨在減少函數(shù)執(zhí)行次數(shù)，但它們的實(shí)現(xiàn)邏輯和適用場(chǎng)景有顯著區(qū)別。以下是兩者的詳細(xì)對(duì)比與分析：

‌一、核心區(qū)別對(duì)比‌

‌二、實(shí)現(xiàn)原理對(duì)比‌

‌1. 函數(shù)防抖的實(shí)現(xiàn)邏輯‌

• ‌關(guān)鍵點(diǎn)‌：通過 setTimeout 延遲執(zhí)行，并在每次觸發(fā)時(shí)清除之前的定時(shí)器。
• ‌示例代碼‌：

  function debounce(func, delay) {
    let timer = null;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay);
    };
  }
  

• ‌類比‌：
  想象你正在等待電梯，如果有人按下按鈕后，電梯到達(dá)前又有人按了按鈕，電梯會(huì)取消之前的指令，重新開始倒計(jì)時(shí)。只有當(dāng)電梯等待時(shí)間結(jié)束后，才會(huì)真正運(yùn)行。

‌2. 函數(shù)節(jié)流的實(shí)現(xiàn)邏輯‌

• ‌關(guān)鍵點(diǎn)‌：通過時(shí)間戳或標(biāo)志位記錄上次執(zhí)行時(shí)間，確保在固定間隔內(nèi)最多執(zhí)行一次。
• ‌示例代碼（時(shí)間戳版）‌：

  function throttle(func, interval) {
    let lastTime = 0;
    return function() {
      const now = Date.now();
      if (now - lastTime >= interval) {
        func.apply(this, arguments);
        lastTime = now;
      }
    };
  }
  

• ‌類比‌：
  想象你正在接水，水龍頭每秒只能放一次水。無論你多么頻繁地打開水龍頭，水只會(huì)以固定的時(shí)間間隔流出。

‌三、適用場(chǎng)景對(duì)比‌

‌1. 函數(shù)防抖的適用場(chǎng)景‌

• ‌搜索框輸入聯(lián)想‌：
  用戶輸入時(shí)，等待用戶停止輸入后再發(fā)送請(qǐng)求（如等待 300ms 后搜索），避免每次輸入都觸發(fā)請(qǐng)求。
• ‌窗口調(diào)整結(jié)束‌：
  監(jiān)聽 resize 事件時(shí)，等待用戶停止拖動(dòng)窗口后再調(diào)整布局。
• ‌防重復(fù)提交‌：
  防止用戶快速點(diǎn)擊按鈕多次提交表單。

‌2. 函數(shù)節(jié)流的適用場(chǎng)景‌

• ‌滾動(dòng)事件處理‌：
  監(jiān)聽 scroll 事件時(shí)，無論用戶滾動(dòng)多快，每 200ms 最多執(zhí)行一次滾動(dòng)邏輯（如懶加載、返回頂部按鈕顯示）。
• ‌鼠標(biāo)移動(dòng)事件‌：
  游戲開發(fā)中，限制鼠標(biāo)移動(dòng)事件的觸發(fā)頻率，避免性能問題。
• ‌動(dòng)畫幀控制‌：
  通過 requestAnimationFrame 節(jié)流，確保動(dòng)畫幀率穩(wěn)定。

‌四、實(shí)際案例對(duì)比‌

‌1. 搜索框輸入‌

• ‌防抖‌：
  用戶輸入 "hello" 時(shí)，若每 100ms 輸入一個(gè)字母，防抖會(huì)等待 300ms 后才發(fā)送 "hello" 的請(qǐng)求。
• ‌節(jié)流‌：
  用戶輸入 "hello" 時(shí)，若每 100ms 輸入一個(gè)字母，節(jié)流可能只發(fā)送 "h"、"he"、"hel" 等部分請(qǐng)求（取決于間隔設(shè)置），導(dǎo)致搜索結(jié)果不準(zhǔn)確。

‌2. 滾動(dòng)加載‌

• ‌防抖‌：
  用戶快速滾動(dòng)頁面時(shí)，防抖會(huì)等待滾動(dòng)停止后才加載數(shù)據(jù)，導(dǎo)致用戶看到空白區(qū)域。
• ‌節(jié)流‌：
  用戶快速滾動(dòng)頁面時(shí)，節(jié)流會(huì)每隔固定時(shí)間加載一次數(shù)據(jù)，確保頁面內(nèi)容持續(xù)更新。

‌五、優(yōu)缺點(diǎn)對(duì)比‌

‌六、如何選擇？‌

1. ‌需要“等待穩(wěn)定”的場(chǎng)景‌ → ‌防抖‌
   • 用戶操作完成后才執(zhí)行（如搜索框輸入、窗口調(diào)整結(jié)束）。
2. ‌需要“持續(xù)響應(yīng)”的場(chǎng)景‌ → ‌節(jié)流‌
   • 用戶操作過程中需要持續(xù)反饋（如滾動(dòng)加載、鼠標(biāo)移動(dòng)）。
3. ‌組合使用‌
   • 某些場(chǎng)景可能需要同時(shí)使用防抖和節(jié)流（如既要在滾動(dòng)停止后加載數(shù)據(jù)，又要在滾動(dòng)過程中限制頻率）。

‌七、代碼示例對(duì)比‌

‌1. 防抖示例：搜索框輸入‌

const searchInput = document.getElementById('search');
const debouncedSearch = debounce(() => {
  console.log('執(zhí)行搜索:', searchInput.value);
}, 300);

searchInput.addEventListener('input', debouncedSearch);

‌2. 節(jié)流示例：滾動(dòng)加載‌

window.addEventListener('scroll', throttle(() => {
  console.log('檢查滾動(dòng)位置，加載數(shù)據(jù)');
  // 懶加載邏輯
}, 200));

‌總結(jié)‌

• ‌函數(shù)防抖‌：適合“等待用戶操作完成”的場(chǎng)景，通過延遲執(zhí)行減少不必要的計(jì)算。
• ‌函數(shù)節(jié)流‌：適合“需要持續(xù)響應(yīng)”的場(chǎng)景，通過固定間隔執(zhí)行確保流暢的用戶體驗(yàn)。

根據(jù)實(shí)際需求選擇合適的技術(shù)，可以顯著提升頁面性能和用戶體驗(yàn)。

到此這篇關(guān)于JavaScript函數(shù)防抖的文章就介紹到這了,更多相關(guān)JS函數(shù)防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！