Vue中 使用定时器 (setInterval、setTimeout)

简介: Vue中 使用定时器 (setInterval、setTimeout)

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

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

1. 循环执行( setInterval )

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

语法:

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。

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">开始</el-button>
    <el-button type="danger" @click="over">结束</el-button>
  </div>
</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 是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是不再运行;

语法

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秒后执行一次方法。

let timer = setTimeout(() => {
  //需要定时执行的代码
  console.debug("Hello World");
  }, 2000)


目录
相关文章
|
6天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
9 0
|
6天前
|
JSON JavaScript 前端开发
【vue】假数据的选择和使用
【vue】假数据的选择和使用
12 1
|
6天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
12 0
|
1天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
1天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
2天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
3天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
5天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
5天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
15 3
|
5天前
|
JavaScript 前端开发 开发者
Vue的神奇解锁:冒险的开始
Vue的神奇解锁:冒险的开始
5 1