panosen-raf

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

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

安装

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

使用示例

基本用法

在下一帧执行回调：

import wrapperRaf from '@panosen/raf';

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

延迟多帧执行

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

import wrapperRaf from '@panosen/raf';

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

取消执行

在回调触发前取消：

import wrapperRaf from '@panosen/raf';

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

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

在 React 组件中使用

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 |

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

发布

pnpm i

pnpm run build

npm publish --dry-run

npm publish