# ThrottleWrapper

**Repository Path**: zxtyjx/throttle-wrapper

## Basic Information

- **Project Name**: ThrottleWrapper
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-22
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zr-throttle-wrapper

[![npm version](https://img.shields.io/npm/v/zr-throttle-wrapper.svg?style=flat-square)](https://www.npmjs.com/package/zr-throttle-wrapper)
![npm](https://img.shields.io/npm/dw/zr-throttle-wrapper?style=flat-square)

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

## 🚀 核心功能
- **内置事件节流**：默认处理 `onClick` 和 `onTap` 事件
- **Promise 支持**：自动处理异步回调的节流控制
- **自定义事件**：可指定单个或多个 DOM 事件进行节流
- **完全兼容**：与 [lodash/throttle](https://lodash.com/docs/4.17.15#throttle) 参数一致

## 📦 安装
```bash
npm install zr-throttle-wrapper
# 或
yarn add zr-throttle-wrapper
```

# 基本使用
```tsx
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'] | 需要节流的事件列表 |

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

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

# 完整示列
```tsx
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](https://github.com/zhaoxiangchang/zr-throttle-wrapper/blob/main/LICENSE)