计时器 hook
时间:2022-07-28
本文章向大家介绍计时器 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 }
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 014.Nginx跨域配置
- 深入理解 FilterChainProxy【源码篇】
- matplotlib基础绘图命令之bar
- 使用 Github Actions 自动部署 Angular 应用到 Github Pages
- 路径中关于斜杠/和反斜杠 的区别
- Redis的高级特性与应用场景(二)
- Redis的高级特性与应用场景(一)
- 022.基于IT论坛案例学习Elasticsearch(一):Filter相关知识
- 耐人寻味的逻辑错误
- 实践搭建Sentry异常中心结合Laravel使用
- 自动化部署 - Laravel Deploy实战
- 正则表达式 | 锚点
- adb shell读取设置手机ocd值以及ocd介绍
- sqli-labs练习(第三、四关)
- 使用 Python 操作 word文档