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





相关文章
|
9月前
|
JavaScript
Vue中 使用定时器 (setInterval、setTimeout)
Vue中 使用定时器 (setInterval、setTimeout)
121 0
|
2月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
|
3月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
20 0
|
8月前
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
57 0
|
JavaScript API
js:定时器setInterval、clearInterval的使用
js:定时器setInterval、clearInterval的使用
110 0
|
JavaScript 前端开发
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法:setInterval()、setTimeout()、clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助。 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数————比如:倒计时跳转页面等等。 2.每隔一段时间重复执行某段函数————比如抢票软件,比如设定500毫秒就重复刷新一次页面等等。 倒计时跳转实现demo:
533 0
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
|
缓存 JavaScript
vue中使用setInterval()循环定时器的注意事项
vue中使用setInterval()循环定时器的注意事项
325 0
|
Web App开发 JavaScript 前端开发
JS之setInterval与setTimeout(超详细)
JS之setInterval与setTimeout(超详细)
413 0
JS之setInterval与setTimeout(超详细)
|
JavaScript
BOM 定时器:setTimeout和setInterval
BOM 定时器:setTimeout和setInterval
157 0
|
前端开发 小程序
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval