计时器 hook

代码语言：javascript复制

/**
 * 定时执行器 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 }
}

hook

0 人点赞