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)

如果有用,点个关注

相关推荐
码上成长3 分钟前
<script setup> 实战模式:大型组件怎么拆?
开发语言·javascript·vue.js
花归去6 分钟前
【Vue3】 中的 【unref】:详解与使用
前端·javascript·vue.js
小霖家的混江龙15 分钟前
巧用辅助线,轻松实现类拼多多的 Tab 吸顶效果
前端·javascript·react.js
q***235727 分钟前
Spring Boot+Vue项目从零入手
vue.js·spring boot·后端
A***279529 分钟前
前端路由管理最佳实践,React Router
前端·react.js·前端框架
恋猫de小郭32 分钟前
Snapchat 开源全新跨平台框架 Valdi ,一起来搞懂它究竟有什么特别之处
android·前端·flutter
艾小码32 分钟前
还在为异步组件加载烦恼?这招让你的Vue应用更丝滑!
前端·javascript·vue.js
几何心凉5 小时前
openGauss:多核时代企业级数据库的性能与高可用新标杆
前端·数据库·数据库开发
AiXed7 小时前
PC微信协议之AES-192-GCM算法
前端·数据库·python
AllData公司负责人7 小时前
实时开发平台(Streampark)--Flink SQL功能演示
大数据·前端·架构·flink·开源