相关文章推荐
怕考试的木耳  ·  软件分享库合集链接汇总推荐_蓝奏云软件分享链 ...·  5 月前    · 
精明的日记本  ·  江西省发布第三批非法集资严重失信人名单 ...·  1 年前    · 
奔放的梨子  ·  Creating Word ...·  2 年前    · 
奔跑的苦咖啡  ·  地藏菩萨本愿经讲记(第十三卷)·  2 年前    · 
愤怒的菠萝  ·  异兽魔都(林田球创作的系列漫画)_搜狗百科·  2 年前    · 
Code  ›  Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]开发者社区
vue 定时器 settimeout setinterval
https://cloud.tencent.com/developer/article/2159057
坚韧的开心果
1 年前
全栈程序员站长

Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]

前往小程序,Get 更优 阅读体验!
立即前往
腾讯云
开发者社区
文档 建议反馈 控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
全栈程序员站长
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
社区首页 > 专栏 > Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]

Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]

作者头像
全栈程序员站长
发布 于 2022-11-10 19:52:26
4.1K 0
发布 于 2022-11-10 19:52:26
举报
文章被收录于专栏: 全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout。

注意:定时器需要在页面销毁的时候清除掉,不然会一直存在!

1. 循环执行( setInterval )

顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会 循环执行 这个方法,直到这个定时器被销毁掉; 语法 :

代码语言: javascript
复制
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...);
code/function	        必需。要调用一个代码串,也可以是一个函数。
milliseconds	        必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。
param1, param2, ...     可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
返回值:	  返回一个 ID(数字),可以将这个ID传递给 clearInterval() 来取消执行。

eg: 开始的时候创建了一个定时器 setInterval ,时间间隔为2秒,每2秒都会调用一次函数 valChange,从而使 value 的值+1。

代码语言: javascript
复制
<template>
value}}</h1>
<el-button type="primary" @click="start">开始</el-button>
<el-button type="danger" @click="over">结束</el-button>
</template>
<script>
export default { 
data() { 
return { 
timer: "",
value: 0,
methods: { 
start(){ 
this.timer = setInterval(this.valChange, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
valChange() { 
this.value++;
console.log(this.value);
over(){ 
clearInterval(this.timer);
mounted() { 
beforeDestroy() { 
clearInterval(this.timer);
</script>

效果:

在这里插入图片描述
在这里插入图片描述
2. 定时执行 ( setTimeout)

定时执行 setTimeout 是设置一个时间,等待时间到达的时候 只执行一次 ,但是执行完以后定时器还在,只是不再运行; 语法 :

代码语言: javascript
复制
setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)
code/function	         必需。要调用一个代码串,也可以是一个函数。
milliseconds	         可选。执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。
param1, param2, ...	     可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
返回值:	返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。

eg: 开始时候创建一个定时器 setTimeout,只在2秒后执行一次方法。

代码语言: javascript
复制
<template>
value}}</h1>
<el-button type="primary" @click="start">开始</el-button>
</template>
<script>
export default { 
data() { 
return { 
timer: "",
value: 0,
methods: { 
start(){ 
this.timer = setTimeout(this.valChange, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
valChange() { 
this.value++;
console.log(this.value);
mounted() { 
beforeDestroy() { 
 
推荐文章
怕考试的木耳  ·  软件分享库合集链接汇总推荐_蓝奏云软件分享链接网站汇总手机 - 骑士助手
5 月前
精明的日记本  ·  江西省发布第三批非法集资严重失信人名单 _ 防范金融风险 _ 南昌县人民政府
1 年前
奔放的梨子  ·  Creating Word Application using Excel VBA: Run-time error '429': ActiveX component can't create obje
2 年前
奔跑的苦咖啡  ·  地藏菩萨本愿经讲记(第十三卷)
2 年前
愤怒的菠萝  ·  异兽魔都(林田球创作的系列漫画)_搜狗百科
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号