Function debounce

  • debounce<Args>(fn, delay?): ((...args: Args) => void)

  • 函数防抖装饰器

    Type Parameters

    • Args extends any[]

      函数参数类型泛型

    Parameters

    • fn: ((...args: Args) => void)

      需要防抖处理的函数

        • (...args): void

        • Parameters

          Returns void

    • Optionaldelay: number

      延迟时间（毫秒），默认：1000

    Returns ((...args: Args) => void)

    包装后的防抖函数

      • (...args): void

      • Parameters

        Returns void

    Description

    创建一个防抖函数，该函数会在延迟时间结束后执行。若在延迟时间内再次调用，则会重新计时。

    Example: 基础用法

    const logMessage = debounce((msg: string) => {
      console.log(msg);
    });

    logMessage("第一次调用"); // 不会立即执行
    logMessage("第二次调用"); // 取消第一次，重新计时
    // 等待1000ms后，只会打印："第二次调用"

    Example: 带参数的函数

    const saveInput = debounce((id: number, value: string) => {
      api.save(id, value);
    }, 500);

    input.addEventListener('input', (e) => {
      saveInput(1, e.target.value); // 快速输入时只会触发最后一次
    });

    Example: React中使用

    function SearchBox() {
      const [query, setQuery] = useState('');
      
      const debouncedSearch = useMemo(() => debounce((q: string) => {
        searchAPI(q);
      }, 300), []);

      useEffect(() => {
        debouncedSearch(query);
        return () => debouncedSearch.cancel(); // 组件卸载时取消
      }, [query]);

      return <input onChange={(e) => setQuery(e.target.value)} />;
    }

    Example: 类方法防抖

    class Editor {
      private debouncedSave = debounce((content: string) => {
        this.saveToDB(content);
      }, 1000);

      public onContentChange(content: string) {
        this.debouncedSave(content);
      }

      private saveToDB(content: string) {
        // 保存逻辑
      }
    }

    Example: 立即执行版本（通过参数扩展）

    // 如果需要立即执行版本，可以这样扩展：
    function advancedDebounce(fn: Function, delay = 1000, immediate = false) {
      let timer: NodeJS.Timeout;
      return function(this: any, ...args: any[]) {
        if (immediate && !timer) {
          fn.apply(this, args);
        }
        clearTimeout(timer);
        timer = setTimeout(() => {
          if (!immediate) {
            fn.apply(this, args);
          }
          timer = null;
        }, delay);
      };
    }

Settings

Member Visibility