防抖（Debounce）未遵守超时设置：点击按钮每次触发请求问题排查

兄弟，我太懂你这个坑了！之前在React类组件里搞防抖也踩过一模一样的雷——明明写了防抖逻辑，结果点一次按钮就触发一次HTTP请求，完全没起到延迟合并请求的作用。这问题的核心原因其实很简单：你每次触发事件时，都重新创建了一个新的防抖函数实例，相当于每次都是“全新的防抖”，自然会每次都执行请求。

常见错误写法（你大概率是这么写的） #

先看看哪些写法会导致这个问题，对照一下你自己的代码：

1. 在事件处理函数内部创建防抖函数

handleClick = () => {
  // 每次点击都会生成一个新的debounce实例，等于白写防抖
  const debouncedRequest = debounce(this.sendHttpRequest, 1000);
  debouncedRequest();
}

2. 在render方法里直接绑定防抖函数

render() {
  // 组件每次渲染都会生成新的防抖函数，点击时自然每次都触发
  return <button onClick={debounce(this.sendHttpRequest, 1000)}>发送请求</button>;
}

这两种写法的问题在于：React类组件每次render（比如状态变化、父组件传参变化）时，都会重新执行render里的代码；而事件处理函数每次调用也会重新创建防抖函数。这样一来，每次点击用的都是全新的防抖函数，它们各自维护自己的定时器，根本不会互相取消，所以每次点击都会触发请求。

正确的解决办法 #

要让防抖生效，核心是确保整个组件生命周期里只创建一次防抖函数实例，然后复用这个实例。这里有两种常用的实现方式：

方法1：在constructor中初始化防抖函数

在组件初始化时就创建好防抖后的函数实例，后续所有点击都复用这个实例：

import React from 'react';
// 假设用的是lodash的debounce，或者你自己的防抖实现
import { debounce } from 'lodash';

class RequestComponent extends React.Component {
  constructor(props) {
    super(props);
    // 在这里创建防抖函数实例，整个组件生命周期只会执行一次
    this.debouncedRequest = debounce(this.sendHttpRequest, 1500);
  }

  // 实际的HTTP请求逻辑
  sendHttpRequest = () => {
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => {
        console.log('请求结果:', data);
        // 处理数据逻辑
      })
      .catch(err => console.error('请求失败:', err));
  }

  // 点击事件直接调用预先创建好的防抖实例
  handleButtonClick = () => {
    this.debouncedRequest();
  }

  // 组件卸载时记得清除防抖定时器，避免内存泄漏
  componentWillUnmount() {
    this.debouncedRequest.cancel();
  }

  render() {
    return (
      <button onClick={this.handleButtonClick}>
        触发请求（防抖1.5秒）
      </button>
    );
  }
}

export default RequestComponent;

方法2：用类字段直接定义防抖函数

如果你习惯用类字段（箭头函数），也可以直接把防抖函数定义为类的属性，这样它只会在组件初始化时创建一次：

import React from 'react';
import { debounce } from 'lodash';

class RequestComponent extends React.Component {
  // 请求逻辑
  sendHttpRequest = () => {
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => console.log('请求结果:', data))
      .catch(err => console.error('请求失败:', err));
  }

  // 直接定义防抖后的函数，作为类属性，只初始化一次
  debouncedRequest = debounce(this.sendHttpRequest, 1500);

  handleButtonClick = () => {
    this.debouncedRequest();
  }

  componentWillUnmount() {
    this.debouncedRequest.cancel();
  }

  render() {
    return <button onClick={this.handleButtonClick}>触发请求（防抖1.5秒）</button>;
  }
}

export default RequestComponent;

额外检查：自定义防抖函数的正确性 #

如果你用的是自己手写的防抖函数，还要确保它的实现是正确的。比如下面是一个标准的防抖函数实现，你可以对照检查：

function debounce(func, delay) {
  let timerId; // 闭包维护定时器ID，确保同一实例复用这个变量
  return function(...args) {
    // 如果之前有定时器，先清除
    if (timerId) clearTimeout(timerId);
    // 重新设置定时器
    timerId = setTimeout(() => {
      func.apply(this, args); // 保留原函数的this和参数
    }, delay);
  }
}

如果你的自定义防抖函数里没有正确维护闭包的timerId，比如每次调用都重新声明timerId，那也会导致防抖失效。

内容的提问来源于stack exchange，提问作者urb