Vue定时器的使用和设置(图文详解)附上源码

定时器分为两种,接下来介绍他们的使用方式

1.一次性定时器

javascript 复制代码
this.timer = setTimeout(() => {
  //需要定时执行的代码,这个3000代表的是毫秒。
  console.debug("Hello World");
  }, 3000)

1.1取消一次性定时器

javascript 复制代码
//清除一次性定时器
clearTimeout(this.timer)

2.指定时间间隔多次执行定时器

javascript 复制代码
this.timer = setInterval(() => {
     //需要定时执行的代码
},3000)

2.1取消多次执行定时器

javascript 复制代码
this.timer = setInterval(() => {
     //需要定时执行的代码
},5000)

如果有用,点个关注

相关推荐
用户938515635076 分钟前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒23 分钟前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李33 分钟前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
赵大仁2 小时前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui
kyriewen3 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
IT_陈寒3 小时前
我又被JavaScript的隐式类型转换坑了
前端·人工智能·后端
其美杰布-富贵-李4 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区4 小时前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程
用户938515635074 小时前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js