首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >计时器 hook

计时器 hook

作者头像
copy_left
发布2020-10-26 10:57:39
1.4K0
发布2020-10-26 10:57:39
举报
文章被收录于专栏:方球方球
/**
 * 定时执行器 interval hook
 * @param { functioin } callback 回调 
 * @param { number } t 时间间隔 
 * @return 
 *  run()  启动定时器
 *  stop() 关闭定时器
 *  isRun.value 是否运行中
 *  setCallback() 设置回调
 */
export function useTimeLoop (callback, t = 30){

const { state: isRun, setTrue, setFalse } = useBool()
    const time = ref(null)
    const cb = ref(callback)
    
    const stop = () => {
    clearInterval(time.value)
    setFalse()
        time.value = null
    }
    
    const run = (...args) => {
    stop()
    setTrue()
        time.value = setInterval(cb.value, t * 1000, ...args)
    }

    const setCallback = callback => cb.value = callback
    
    return { run, stop, isRun, setCallback }
}
  

/**
 * 定时器 timeout
 * @summary
 * 使用 timeout 实现的定时器,兼容Promise回调,
 * 当回调返回Promise时,将等待Promise执行完成后,
 * 出入下一次计时
 * @param { functioin | Promise } callback 执行回调
 * @param { number } t 时间间隔
 * @returns { Object }
 *  run()  启动定时器
 *  stop() 关闭定时器
 *  isRun.value 是否运行中
 *  setCallback() 设置回调
 * 
 * @exmaple
 * const { run, stop, isRun } = useTimeout()
 * async function update(){
 *   try{
 *      await API.update()  
 *   }catch(e){
 *      console.error(e)
 *      stop()
 *   }
 * }
 * 
 * @tips
 * 中断处理:
 *  对于callback为Promise的情况, callback内执行stop。
 *  存在clearTimeout无法中断循环的情况, 主要因为clearTimeout清理的是timeout的执行,
 *  必须在回调执行前。
 *  所以 run 循环需要通过 isRun 判断是否执行下一计时器. 
 *  统一将中断封装为 stop 函数
 * 
 */
export function useTimeout(callback, t){
    const { state: isRun, setTrue, setFalse } = useBool()
    const time = ref(null)
    const cb = ref(callback)

    const stop = () => {
        clearTimeout(time.value)
        time.value = null
        setFalse()
    }
    
    const run = (...args) => {
        setTrue()
        time.value = setTimeout(async () => {
            await callback(...args)
            isRun.value && run()
        }, t * 1000)
    }

    const setCallback = callback => cb.value = callback
    
    return { run, stop, isRun, setCallback }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档