Lodash防抖函数在持续触发的防抖期间能否至少执行一次？

你需要的是结合了节流特性的防抖逻辑——给防抖加上「最大等待时间」：当函数被频繁触发时，不仅会在最后一次触发后等待指定防抖时间执行，还会确保如果超过设定的最大等待时长，就强制执行一次，避免一直等到触发停止才执行。

手写实现适配React Native #

直接写一个通用工具函数，RN环境下可直接使用：

function debounceWithMaxWait(func, wait, maxWait) {
  let timeoutId = null;
  let maxTimeoutId = null;
  let lastArgs = null;
  let lastThis = null;

  function invokeFunc() {
    func.apply(lastThis, lastArgs);
    timeoutId = null;
    maxTimeoutId = null;
    lastArgs = null;
    lastThis = null;
  }

  function startMaxTimer() {
    maxTimeoutId = setTimeout(() => {
      invokeFunc();
    }, maxWait);
  }

  return function debounced(...args) {
    lastThis = this;
    lastArgs = args;

    // 每次触发都重置防抖定时器
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(invokeFunc, wait);

    // 未启动最大等待定时器时，启动它
    if (!maxTimeoutId) {
      startMaxTimer();
    }
  };
}

React Native组件中使用示例 #

比如处理搜索框输入，防抖等待1秒，最多5秒必须执行一次：

import { useState, useCallback, useEffect } from 'react';
import { TextInput } from 'react-native';

export default function SearchComponent() {
  const [searchText, setSearchText] = useState('');
  
  // 创建带最大等待时间的防抖函数
  const debouncedSearch = useCallback(
    debounceWithMaxWait((text) => {
      // 这里写你的搜索逻辑，比如请求接口
      console.log('执行搜索:', text);
    }, 1000, 5000),
    []
  );

  const handleTextChange = (text) => {
    setSearchText(text);
    debouncedSearch(text);
  };

  // 组件卸载时清除定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (debouncedSearch.timeoutId) clearTimeout(debouncedSearch.timeoutId);
      if (debouncedSearch.maxTimeoutId) clearTimeout(debouncedSearch.maxTimeoutId);
    };
  }, [debouncedSearch]);

  return <TextInput value={searchText} onChangeText={handleTextChange} placeholder="输入搜索内容" />;
}

逻辑说明 #

• 每次触发防抖函数时，都会重置1秒的防抖定时器，确保输入停止后1秒执行搜索
• 第一次触发时启动5秒的最大等待定时器，若5秒内持续有输入（防抖定时器不断被重置），第5秒时会强制执行一次搜索
• 执行完成后清空所有定时器，下一次触发时重新开始计时

注意事项 #

• 组件卸载时必须清除定时器，否则可能引发内存泄漏
• 若需传递动态参数，确保useCallback的依赖项正确，避免重复创建防抖函数
• 可根据需求灵活调整wait（防抖等待时间）和maxWait（最大等待时间）的数值

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