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()
相关推荐
kymjs张涛10 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵15 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62227 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
L_autinue_Star34 分钟前
手写vector容器:C++模板实战指南(从0到1掌握泛型编程)
java·c语言·开发语言·c++·学习·stl
患得患失94934 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习38 分钟前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr39 分钟前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
运维咖啡吧43 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥1 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript