zr-throttle-wrapper

基于 lodash 的 React 事件节流高阶组件，提供 Promise 支持和自定义事件节流能力

🚀 核心功能

• 内置事件节流：默认处理 onClick 和 onTap 事件
• Promise 支持：自动处理异步回调的节流控制
• 自定义事件：可指定单个或多个 DOM 事件进行节流
• 完全兼容：与 lodash/throttle 参数一致

📦 安装

npm install zr-throttle-wrapper
# 或
yarn add zr-throttle-wrapper

基本使用

import ThrottleWrapper from 'zr-throttle-wrapper';

// 默认节流 onClick 和 onTap
<ThrottleWrapper wait={300} leading={true}>
  <button onClick={() => console.log('节流点击')}>点击我</button>
</ThrottleWrapper>

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | wait | number | 0 | 节流时间间隔 | | leading | boolean | true | 是否在节流开始时执行回调 | | trailing | boolean | true | 是否在节流结束后执行回调 | | events | string[] | ['click', 'tap'] | 需要节流的事件列表 |

进阶用法

<ThrottleWrapper wait={500}>
  <button 
    onClick={async () => {
      // 自动处理 Promise 节流
      await fetchData(); 
    }}
  >
    异步加载
  </button>
</ThrottleWrapper>

自定义事件

<ThrottleWrapper 
  wait={200}
  events={['onMouseEnter', 'onDoubleClick']}
>
  <div 
    onMouseEnter={() => console.log('鼠标进入')}
    onDoubleClick={() => console.log('双击事件')}
  >
    交互区域
  </div>
</ThrottleWrapper>

完整示列

import React, { useRef } from 'react';
import ThrottleWrapper from 'zr-throttle-wrapper';

const App = () => {
  const scrollRef = useRef(null);

  return (
    <ThrottleWrapper 
      wait={1000} 
      events={['onScroll']}
      trailing={false}
    >
      <div 
        ref={scrollRef}
        onScroll={() => console.log('节流滚动事件')}
        style={{ height: '200px', overflow: 'auto', border: '1px solid #eee' }}
      >
        {[...Array(50)].map((_, i) => (
          <p key={i}>滚动内容 {i+1}</p>
        ))}
      </div>
    </ThrottleWrapper>
  );
};

export default App;

开源协议

MIT