[其他资源] 分享一个时间工具

[复制链接]
1468 |1
啊啵呲嘚 发表于 2023-4-6 15:48:39 | 显示全部楼层 |阅读模式
本帖最后由 啊啵呲嘚 于 2023-10-31 16:53 编辑


总体结构

export namespace TimeTool {
    export type TimeHandler = (...args: any[]) => void;
    export type FrameHandler = (dt: number, ...args: any[]) => void;
    export type TimeObject<T extends TimeHandler> = {
        id: number;
        /**
         * 执行函数
         * @param args 函数参数
         * @returns
         */
        run: (...args: Parameters<T>) => void;
        /**重置,下次调用是重新走冷却 */
        reset: () => void;
    };
    export type ReturnTimeObject<T extends TimeHandler> = Omit<TimeObject<T>, "id">;
    export class Global
    export class Instantiable
    /**全局的*/
    export const instantiable
}

Golbal类的结构
类里全是静态方法,基于js中的settimeout实现
与编辑器的的update无关
export class Global {
        /**
         * 节流: {@link waitTime} 秒内只运行一次 {@link fun} ,若在 {@link waitTime} 秒内重复触发,只有一次生效
         * @param cell 执行域
         * @param fun 节流函数
         * @param waitTime 等待时间,单位(毫秒)
         * @param loadingBefore 是否在立即调用 {@link fun} ,为true时会立即调用
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        static throttle<F extends TimeHandler>(cell: unknown, fun: F, waitTime: number, loadingBefore: boolean = true): ReturnTimeObject<F>

        /**
         * 防抖:{@link waitTime} 毫秒后在执行该事件 {@link fun} ,若在 {@link waitTime} 毫秒内被重复触发,则重新计时
         * @param cell 执行域
         * @param fun 防抖函数
         * @param waitTime 等待时间,单位(毫秒)
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        static debounce<T extends TimeHandler>(cell: unknown, fun: T, waitTime: number, alias?: string, ...params: unknown[]): ReturnTimeObject<T>   
    }

自定义的
在实例化后,有调用update来觉得更新周期
/**
     * 自定义的,在需要的地方实例化就行,并且每帧调用{@link update(dt)}
     * ```
     * //实例化
     * const a = new TimeTool.Instantiable()
     * ```
     * ```
     * //调用更新函数
     * a.update(dt)
     * ```
     */
export class Instantiable {

        update(dt: number)

        destroy()
        /**
         * 节流: {@link waitTime} 毫秒内只运行一次 {@link fun} ,若在 {@link waitTime} 毫秒内重复触发,只有一次生效
         * @param cellThis 执行域
         * @param fun 节流函数
         * @param waitTime 等待时间,单位(毫秒)
         * @param loadingBefore 是否立即调用 {@link fun} ,为true时立即调用,默认为true
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        throttle<T extends TimeHandler>(cellThis: unknown, fun: T, waitTime: number, loadingBefore: boolean = true): ReturnTimeObject<T>

        /**
         * 防抖:{@link waitTime} 毫秒后在执行该事件 {@link fun} ,若在 {@link waitTime} 毫秒内被重复触发,则重新计时
         * @param cell 执行域
         * @param fun 防抖函数
         * @param waitTime 等待时间,单位(毫秒)
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        debounce<T extends TimeHandler>(cellThis: unknown, fun: T, waitTime: number): ReturnTimeObject<T>

        /**
         * 节流: {@link frames} 帧内只运行一次 {@link fun} ,若在 {@link frames} 帧内重复触发,只有一次生效
         * @param cellThis 执行域
         * @param fun 节流函数
         * @param frames 等待多久,单位帧
         * @param loadingBefore 是否在冷却前调用 {@link fun} ,为true时在冷却前调用
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        throttleByFrame<T extends TimeHandler>(cellThis: unknown, fun: T, frames: number, loadingBefore: boolean = true): ReturnTimeObject<T>

        /**
         * 防抖:{@link frames} 帧后在执行该事件 {@link fun} ,若在 {@link frames} 帧内被重复触发,则重新计时
         * @param cell 执行域
         * @param fun 防抖函数
         * @param frames 等待时间,单位帧
         * @param params 函数 {@link fun} 的参数
         * @returns 一个包含运行和重置的对象
         */
        debounceByFrame<T extends TimeHandler>(cell: unknown, fun: T, frames: number): ReturnTimeObject<T>
        /**
         * 延迟{@link interval}毫秒秒执行
         * @param handler 延迟执行的函数
         * @param timeout 延迟时间(毫秒)
         * @param args 延迟执行的函数的参数
         * @returns
         */
        setTimeout(thisArgs: unknown, handler: TimeHandler, timeout?: number, ...args: any[])

        clearTimeout(id: number)
        /**
         * 间隔{@link interval}毫秒重复执行
         * @param handler 间隔重复执行的函数
         * @param interval 间隔时间(毫秒)
         * @param args 间隔重复执行的函数的参数
         * @returns
         */
        setInterval(thisArg: unknown, handler: TimeHandler, interval?: number, ...args: any[])

        clearInterval(id: number)

        /**
         * 设置每隔{@link frameNum}帧执行一次
         * @param thisArg
         * @param handler 要延迟执行的函数
         * @param frameNum 帧数
         * @param args 函数传入的参数
         * @returns
         */
        setFrame(thisArg: unknown, handler: FrameHandler, frameNum: number, ...args: any[])

        clearFrame(id: number)

        /**
         * 延迟{@link frameNum}帧执行
         * @param thisArg
         * @param handler 要延迟执行的函数
         * @param frameNum 延迟的帧数
         * @param args 函数传入的参数
         * @returns
         */
        setDelayFrame(thisArg: unknown, handler: FrameHandler, frameNum: number, ...args: any[])

        clearDelayFrame(id: number)
    }

全局默认生成的一个常量
有调用update的维护更新
/**
     * 全局的,需要在一个地方每帧调用{@link instantiable.update(dt)}
     * ```
     * onUpdate(dt:number){
     *  TimeTool.instantiable.update(dt)
     * }
     * ```
     */
    export const instantiable = new Instantiable();
}







TimeTool.ts

14.73 KB, 下载次数: 62

时间工具

回复

使用道具 举报

kk 发表于 2023-4-6 16:16:36 | 显示全部楼层
回复

使用道具 举报

72小时热榜
热门版块
快速回复 返回顶部 返回列表