open-index/open-npm huggingface dataset:
npm package: @panosen/raf
Description: panosen requestAnimationFrame
Latest version: 0.0.2

# panosen-raf

`@panosen/raf` 是一个对 `requestAnimationFrame` 的轻量封装，支持延迟多帧执行回调，并提供取消功能。

> 参考自 https://github.com/react-component/util/blob/master/src/raf.ts

## 安装

```bash
npm install @panosen/raf
# 或
pnpm add @panosen/raf
```

## 使用示例

### 基本用法

在下一帧执行回调：

```typescript
import wrapperRaf from '@panosen/raf';

const id = wrapperRaf(() => {
    console.log('在下一帧执行');
});
```

### 延迟多帧执行

等待指定帧数后再执行回调（默认 1 帧）：

```typescript
import wrapperRaf from '@panosen/raf';

// 等待 3 帧后执行
const id = wrapperRaf(() => {
    console.log('3 帧后执行');
}, 3);
```

### 取消执行

在回调触发前取消：

```typescript
import wrapperRaf from '@panosen/raf';

const id = wrapperRaf(() => {
    console.log('这条消息不会被打印');
}, 5);

// 取消尚未执行的回调
wrapperRaf.cancel(id);
```

### 在 React 组件中使用

```typescript
import React, { useEffect } from 'react';
import wrapperRaf from '@panosen/raf';

const MyComponent: React.FC = () => {
    useEffect(() => {
        const id = wrapperRaf(() => {
            // 在组件挂载后的下一帧执行 DOM 操作
            console.log('DOM 已更新，执行后续逻辑');
        });

        return () => {
            // 组件卸载时取消未执行的回调
            wrapperRaf.cancel(id);
        };
    }, []);

    return <div>示例组件</div>;
};

export default MyComponent;
```

## API

### `wrapperRaf(callback, times?)`

| 参数       | 类型         | 默认值 | 说明                         |
| ---------- | ------------ | ------ | ---------------------------- |
| `callback` | `() => void` | -      | 延迟执行的回调函数           |
| `times`    | `number`     | `1`    | 延迟的帧数，至少等待该帧数后执行 |

返回值：`number` —— 任务 ID，可用于取消。

### `wrapperRaf.cancel(id)`

| 参数 | 类型     | 说明                              |
| ---- | -------- | --------------------------------- |
| `id` | `number` | 由 `wrapperRaf` 返回的任务 ID |

取消尚未执行的回调。若回调已执行，则无任何效果。

## 发布

```bash
pnpm i

pnpm run build

npm publish --dry-run

npm publish
```