专栏首页方球计时器 hook

计时器 hook

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • element-ui 表格hook 及相关组件

    copy_left
  • stroageState Vue 缓存hook

    copy_left
  • 生成压缩包并上传指定分支自动化脚本

    最初的想法,希望在开发分支生成压缩包后,通过checkout [branch] [file] 合并文件,但切换分支时,因为生成了新文件,需要保存更新。所以改用将...

    copy_left
  • QQ 浏览器测试左移实践

    测试左移: 通俗的说即将测试行为放入软件开发周期的较早阶段进行,不局限于软件提测后再介入测试。

    腾讯移动品质中心TMQ
  • DevOps-自动化测试阶段详细解读和技术脚本预言

    测试环境布署 1.appium功能自动化框架环境搭建 2.python脚本运行环境配置 3.Jenkins本地安装配置和Zenportal的安装部署 4.JDK...

    用户6367961
  • 腾讯TMQ在线沙龙|精准测试介绍

    精准测试介绍 活动时间 : 2016年8月25日 QQ群视频交流 活动介绍 :TMQ在线沙龙第七期分享 本次分享的主题是介绍精准测试相关的知识。 共有12...

    腾讯移动品质中心TMQ
  • Mybaits深入了解(一)----带你入门

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google ...

    令仔很忙
  • 操作系统角度谈测试管理和自动化测试

    我们不得不佩服冯诺依曼和早期的计算机科学家们,不只是因为计算机这个伟大产物的诞生和发展,更主要的是,这个行业中的任何分支都似乎有无尽的可能性,让一些大牛们终其一...

    用户7657330
  • mybatis_基础篇

    一、认识mybatis:     MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software founda...

    赵小忠
  • Python手动或自动协程操作方法解析

    砸漏

扫码关注云+社区

领取腾讯云代金券