raf-throttle.ts

1-raf-throttle.ts

type RafState<Args> =
    | { type: 'waiting'; latestArgs: Args; rafId: number }
    | { type: 'idle' };

export const animationFrameThrottle = <Args extends any[]>(
    callback: (...args: Args) => unknown,
): ((...args: Args) => void) & { cancel: () => void } => {
    let state: RafState<Args> = { type: 'idle' };

    const cancel = () => {
        if (state.type === 'waiting') {
            window.cancelAnimationFrame(state.rafId);
            state = { type: 'idle' };
        }
    };

    const onRaf = () => {
        if (state.type === 'waiting') {
            callback(...state.latestArgs);
            state = { type: 'idle' };
        }
    };

    const call = (...args: Args) => {
        switch (state.type) {
            case 'waiting': {
                state.latestArgs = args;
                break;
            }
            case 'idle': {
                state = {
                    type: 'waiting',
                    latestArgs: args,
                    rafId: window.requestAnimationFrame(onRaf),
                };
                break;
            }
        }
    };

    return Object.assign(call, { cancel });
};

2-Component.tsx

import React from 'react';
import { animationFrameThrottle } from './raf-throttle';

const Component = () => {
    const onMouseMove = React.useMemo(() =>
        animationFrameThrottle(() => setState('move')),
    );

    return (
        <div
            onMouseMove={onMouseMove}
            onMouseLeave={(e) => {
                onMouseMove.cancel();
                setState('leave');
            }}
        />
    );
};