JS定时任务封装(支持精确倒计时)

TypeScript 复制代码
/***
 * callback 定时任务回调函数,
 * time 任务执行的间隔时间,
 * config.accurate 是否是精准的定时任务,如果是,会自动修正定时器偏差。
 */
export default function (
    callback: () => void, 
    time: number, 
    config?: {
        accurate: boolean // 是否是精准的定时任务,如果是,会自动修正定时器偏差。
    }
) {
    let task: any = null

    const record = {
        startTime: 0,
        runTime: 0,
        offsetTime: 0
    }

    const run = () => {
        if (config?.accurate) {
            record.startTime = new Date().getTime()
        }
        task = setTimeout(() => {
            if (config?.accurate) {
                record.runTime = new Date().getTime()
                record.offsetTime = time - (record.runTime - record.startTime)
            } else {
                record.offsetTime = 0
            }
            // 必须先run,再执行callback,防止在callback中调用clearTask方法
            run()
            callback()
        }, time + record.offsetTime)
    }

    /**
     * 清除定时任务
     */
    const clearTask = () => {
        clearTimeout(task)
        task = null
    }

    /**
     * 启动定时任务
     * @param immediate 是否立即运行
     */
    const startTask = (immediate?: boolean) => {
        if (immediate) {
            callback()
        }
        clearTask()
        run();
    }

    return {
        clearTask,
        startTask
    }
}

使用、控制都很方便:

TypeScript 复制代码
// 初始化
const { clearTask, startTask } = useInterval(() => {
    // do something....

}, 1000)

// 启动
startTask()


// 清除
clearTask()


//重新启动
clearTask()
startTask()
相关推荐
JeffongTan1 小时前
在LWC中镶嵌VF Page获取用户IP
前端·javascript·salesforce
点心的游戏开发世界2 小时前
GDScript 入门笔记(十一):Lambda 与匿名函数
开发语言·笔记·游戏引擎·godot
不cong明的亚子4 小时前
web live多屏互动平台
javascript·经验分享·音视频
陆枫Larry4 小时前
Astro 是什么
前端
事圆则缓4 小时前
Kotlin 协程完全指南
开发语言·kotlin
我爱写代码i4 小时前
BeLink - 支持生成多种URL 缩短网址PHP源码
开发语言·php·短网址php源码
Java后端的Ai之路4 小时前
20、Python - 备忘录模式
开发语言·人工智能·python·外观模式·备忘录模式
是立不是利5 小时前
写给设计师的 CSS 博客美学指南
前端·css
统计学小王子5 小时前
数学建模国赛倒计时4天——《统计模型精讲(混合效应模型R语言实现)》
开发语言·数学建模·r语言
知无不研5 小时前
c语言中循环的介绍与简单应用
c语言·开发语言·算法·循环·for·while