JS定时任务封装（支持精确倒计时）-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS定时任务封装（支持精确倒计时）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

/***
 * 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
    }
}

使用、控制都很方便：文章来源地址https://www.toymoban.com/news/detail-736756.html

// 初始化
const { clearTask, startTask } = useInterval(() => {
    // do something....

}, 1000)

// 启动
startTask()


// 清除
clearTask()


//重新启动
clearTask()
startTask()

到了这里，关于JS定时任务封装（支持精确倒计时）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！