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>

效果:

2020062310470442.png

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

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">开始</el-button>
  </div>
</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() {
    clearTimeout(this.timer);
  },
};
</script>

效果:

2020062310470442.png





相关文章
|
应用服务中间件 nginx
Nginx rewrite(URL)地址重定向
Nginx rewrite(URL)地址重定向
921 0
|
10月前
|
机器学习/深度学习 人工智能 并行计算
Unsloth:学生党福音!开源神器让大模型训练提速10倍:单GPU跑Llama3,5小时变30分钟
Unsloth 是一款开源的大语言模型微调工具,支持 Llama-3、Mistral、Phi-4 等主流 LLM,通过优化计算步骤和手写 GPU 内核,显著提升训练速度并减少内存使用。
1422 3
Unsloth:学生党福音!开源神器让大模型训练提速10倍:单GPU跑Llama3,5小时变30分钟
仿美团饿了么程序,外卖人9.0外卖订餐源码(PC+微信)
仿美团饿了么程序,外卖人9.0商业版外卖订餐源码,PC+微信+WAP+短信宝,多城市多色版 非常不错的独立版外卖跑腿网站源码,喜欢的可以下载调试看看吧!!
347 0
ThinkPHP6的控制器定义及控制器初使用
本文介绍了ThinkPHP6框架中控制器的定义和初步使用方法。内容包括控制器的文件位置、命名规范、如何改变控制器目录名、单应用模式下的项目访问路径,以及控制器类文件的实际位置和访问URL的示例。文章还提到了ThinkPHP的控制器类可以灵活定义,无需继承任何基础类库,但建议继承一个基础的控制器类以方便扩展。控制器名不区分大小写,并且支持驼峰命名转下划线的方式。
ThinkPHP6的控制器定义及控制器初使用
|
存储 前端开发 JavaScript
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
SVN状态说明
SVN状态说明
601 2
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
移动开发 小程序 API
uniapp中uview组件库的AlertTips 警告提示使用方法
uniapp中uview组件库的AlertTips 警告提示使用方法
677 2
|
JavaScript
vue使用iframe 子页面调用父页面的方法
vue使用iframe 子页面调用父页面的方法
266 0
|
算法 程序员 Shell
python股票量化交易(11)---使用pyqt5构建股票交易软件主页
python股票量化交易(11)---使用pyqt5构建股票交易软件主页
1255 0
python股票量化交易(11)---使用pyqt5构建股票交易软件主页