计时器 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 }
}
- 研究称性别不均衡或导致人工智能持有性别偏见
- ASP.NET 2.0加密Web.config 配置文件
- .Net 跨平台可移植类库正在进行
- 掌握机器学习数学基础之概率统计(三)
- IBatisNet 之 自动生成主关键字
- IBatisNet之获取和操作SQL语句
- 大数据研究学者谈城市运行安全:要将应急处置转化为风险管理
- Castle.MVC框架介绍
- 在 .Net 设定 proxy 的方法
- MVC结构简介
- 优酷、爱奇艺、摩拜……多家网络平台被曝注册容易注销难!面临个人隐私泄露风险
- WordPress中借助.htaccess屏蔽某个IP或某个IP段(防垃圾评论)
- ASP.NET 调味品:AJAX
- CTreeCtrl 控件使用总结
- 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 数组属性和方法
- PHP addslashes()函数讲解
- PHP+swoole+linux实现系统监控和性能优化操作示例
- PHP中PCRE正则解析代码详解
- tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
- 使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
- python 抓取知乎指定回答下视频的方法
- 基于python实现计算两组数据P值
- PHP getNamespaces()函数讲解
- OpenCV 使用imread()函数读取图片的六种正确姿势
- PHP simplexml_import_dom()函数讲解
- PHP getName()函数讲解
- Laravel框架集成UEditor编辑器的方法图文与实例详解
- PHP+redis实现的购物车单例类示例
- ThinkPHP3.2.3框架邮件发送功能图文实例详解
- PHP simplexml_load_file()函数讲解