定时器：setInterval和setTimeout

在vue开发中定时器的使用

说明

• setInterval（循环执行）
• setTimeout（只执行一次）

一、循环执行（setInterval）

1. 定义：循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉。
2. 用法：setInterval（“方法名或方法”，“时间”）
   • 第1个参数为方法名或者方法，（注意：方法名的时候不要加括号）。
   • 第2个参数为时间间隔。
3. 具体代码：页面初始化时创建一个定时器setInterval，时间间隔为1秒，每一秒都会调用一次函数get，从而使value的值加1。

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

二、定时执行 （setTimeout）

1. 定义：定时执行设置一个时间，时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行。
2. 用法：setTimeout(“方法名或方法”, “延时”)
   • 第1个参数为方法名或者方法。（注意为方法名的时候不要加括号）
   • 第2个参数为时间间隔。
3. 代码：页面初始化时候创建一个定时器setTimeout，只在1秒后执行一次方法。（定时器需要在页面销毁的时候清除掉，不然会一直存在！！！）

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>