防抖和节流到底该用哪个？搜索框输入请求老是发太多次

这个问题我遇到过很多次了，防抖和节流确实容易纠结。通用的做法是这样的：

1. 搜索框这种场景推荐用防抖，但需要调整等待时间
2. 设置300-500ms的延迟比较合适，既不会太快也不会太慢
3. 加上立即执行的选项，这样第一次输入时能立即反馈

给你个现成的实现方案：

function debounce(func, wait, immediate) {

  let timeout;

  return function() {

    const context = this;

    const args = arguments;

    const later = function() {

      timeout = null;

      if (!immediate) func.apply(context, args);

    };

    const callNow = immediate && !timeout;

    clearTimeout(timeout);

    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);

  };

}



const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('input', debounce(function() {

  // 这里放你的搜索请求逻辑

  console.log('发送搜索请求:', searchInput.value);

}, 400, true));

如果用户真的需要中间结果（比如输入"javascript"想先看"java"的结果），可以把等待时间调短到200ms，或者考虑混合方案：防抖+最后一次输入后强制触发。

搜索框这块，听我的，老老实实上防抖。节流虽然也能减少请求，但在搜索场景下体验很怪，用户打字快的话，中间会发出一堆无意义的请求，浪费资源不说，最后返回的结果还可能乱序。

你感觉防抖“搜不到中间结果”，这其实是防抖的特性，它就是专门为了等用户停下来才发的。如果你觉得反应慢，大概率是你延迟时间设太长了，别设个 1 秒什么的，试试 300 毫秒，这个数值是业界公认比较舒服的平衡点。

还有个更关键的大招，很多人容易忽略：取消请求。防抖只是减少了触发频率，但如果前一个请求还没回来，用户又输入了新字，这时候应该把前一个请求直接杀掉。这样既能保证服务器压力小，又能保证用户看到的永远是他最后一次输入的结果。

下面这段代码整合了防抖和请求取消，直接拿去用：

// 简单的防抖函数实现

function debounce(func, wait) {

  let timeout;

  return function(...args) {

    const context = this;

    clearTimeout(timeout);

    timeout = setTimeout(() => func.apply(context, args), wait);

  };

}



const searchInput = document.getElementById('searchInput');

const resultsDiv = document.getElementById('results');

let currentController = null; // 用于存储当前的 AbortController



// 模拟一个搜索请求

function performSearch(query) {

  // 如果有正在进行的请求，先取消它

  if (currentController) {

    currentController.abort();

  }



  // 创建一个新的 AbortController

  currentController = new AbortController();

  const signal = currentController.signal;



  // 这里换成你真实的 fetch 请求

  fetch(/api/search?q=${encodeURIComponent(query)}, { signal })

    .then(response => {

      if (!response.ok) throw new Error('Network error');

      return response.json();

    })

    .then(data => {

      // 渲染结果

      resultsDiv.innerHTML = data.map(item => 
${item}).join('');

    })

    .catch(error => {

      // 如果是手动取消的请求，忽略错误

      if (error.name === 'AbortError') {

        console.log('请求被取消');

      } else {

        console.error('搜索出错:', error);

      }

    });

}



// 绑定事件，使用 300ms 防抖

searchInput.addEventListener('input', debounce((e) => {

  const query = e.target.value.trim();

  if (query) {

    performSearch(query);

  } else {

    resultsDiv.innerHTML = '';

  }

}, 300));

这套组合拳下来，既不会频繁请求，也不会因为打字快导致旧结果覆盖新结果，服务器压力瞬间就下来了。别纠结节流了，搜索框用防抖才是正解。