Vue中使用定时器(setInterval、setTimeout)的两种方式

2025-06-27 11:02:26

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)

到此这篇关于Vue中使用定时器（setInterval、setTimeout）的文章就介绍到这了,更多相关Vue使用定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript中定时器setTimeout()和setInterval()的用法

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setTimeout(func|code, delay) 上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名
Vue中使用setTimeout问题

目录 Vue使用setTimeout 使用setTimeout存在的潜在问题总结 Vue使用setTimeout 今天使用setTimeout 来修改一个变量的值以实现提示框的自动消失. 先是这样写,结果发现函数被调用了,但是不是在3秒后. 然后呢,我给加了引号,确实是3秒后触发了,但是好像是指向有些不对,查了一些资料后成功实现目标, 用以下两种格式写都可以成功调用自己写的方法使用setTimeout存在的潜在问题在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中An
setTimeout在vue中的正确使用方式

目录 setTimeout在vue中的正确使用遇到了1个坑问题出在我的格式上面解决vue在setTimeout内修改this失效使用箭头函数总结 setTimeout在vue中的正确使用笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数. 遇到了1个坑在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失这里奇怪的是,end方法的确被执行了.但是没有执行4s后执行的效果.那我要你
vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）

一.路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个
C语言中计算二叉树的宽度的两种方式

C语言中计算二叉树的宽度的两种方式二叉树作为一种很特殊的数据结构,功能上有很大的作用!今天就来看看怎么计算一个二叉树的最大的宽度吧. 采用递归方式下面是代码内容: int GetMaxWidth(BinaryTree pointer){ int width[10];//加入这棵树的最大高度不超过10 int maxWidth=0; int floor=1; if(pointer){ if(floor==1){//如果访问的是根节点的话,第一层节点++; width[floor]++; flo
详解python中字典的循环遍历的两种方式

开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python3中,下面两种方法都是通用的. 1. 只对键的遍历一个简单的for语句就能循环字典的所有键,就像处理序列一样: d = {'name1' : 'pythontab', 'name2' : '.', 'name3' : 'com'} for key in d: print (key, ' value
Vue 中可以定义组件模版的几种方式

前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升. 当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue.Angular.React. 那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别. 字符串形式 Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用 Vue.component("m
Docker中数据卷(volume)管理的两种方式

上篇文章给大家介绍过 docker基础知识之挂载本地目录的方法 ,今天给大家介绍Docker中数据卷(volume)管理的两种方式,具体内容如下所示: 什么是数据卷数据卷( volume ):volume是存在于一个或多个容器中的特定文件或文件夹,这个目录以独立于联合文件系统的形式在宿主机中存在,并为数据的共享与持久化提供便利. 为什么要用数据卷 Docker分层文件系统存在的问题: Docker的镜像是由一系列的只读层组合而来的,当启动一个容器时, Docker加载镜像的所有只读层,并在最上
vue中Echarts使用动态数据的两种实现方式

目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: { options() { let that
Java web开发中加载图片路径的两种方式

(1) src="/image/1_it.jpg" (2) src="http://localhost:8080/image/1_it.jpg" 其中localhost可以换位你的电脑IP,端口号也要相应改变. 以上均在基于编译器idea以及tomcat服务器开发的web中测试可行!都是要先定位到项目的位置! 以上所述是小编给大家介绍的Java web开发加载图片路径的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
C#中后台post请求常用的两种方式总结

目录 1.application/x-www-form-urlencoded 2.mutipart/form-data 最近对接接口的时候,需要根据对方的请求数据类型来进行传值,常用的就是application/x-www-form-urlencoded,ajax提交数据时也是使用的这种方式,但是没办法传递文件之类的信息,另一种就是mutipart/form-data,可以同时传递参数与文件或二进制流,这里主要使用的就是这两种方式 1.application/x-www-form-urlenco
Android中Rxjava实现三级缓存的两种方式

本文正如标题所说的用rxjava实现数据的三级缓存分别为内存,磁盘,网络,刚好最近在看Android源码设计模式解析与实战(受里面的ImageLoader的设计启发). 我把代码放到了我的hot项目中,github地址源码下载地址:Rxjava_jb51.rar 1.使用concat()和first()的操作符. 2.使用BehaviorSubject. 先说BehaviorSubject的实现方法,废话不多说直接上代码, /** * Created by wukewei on 16/6/20
Vue中引入第三方JS库的四种方式

目录一.绝对路径直接引入,全局可用二.绝对路径直接引入,配置后,import 引入后再使用三.webpack中配置 alias,import 引入后再使用四.webpack 中配置 plugins,无需 import 全局可用结论我们以 jQuery 为例,来讲解一.绝对路径直接引入,全局可用主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script

Vue中使用定时器(setInterval、setTimeout)的两种方式

目录

1. 循环执行（ setInterval ）

2. 定时执行 （ setTimeout）

相关推荐

随机推荐

2. 定时执行（ setTimeout）