1.setInterval循环执行定时器

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

页面触发

mounted() {
    this.getConsole()
     /*
       最初始情况，项目刚打开的时候，这个时候页面是必定没有定时器的，那么逻辑就会走else，这个时候就会注册一个定时器去循环调用相应逻辑代码
       后续有三种情况
          情况一：路由跳转，跳走了，就要清除这个定时器，所以在beforeDestroy钩子中要清除定时器
          情况二：关闭项目，关闭项目了以后，系统就会自动停掉定时器，这个不用管它
          情况三：刷新页面，这个时候vue组件的钩子是不会执行beforeDestroy和destroyed钩子的，所以
                 需要加上if判断一下，若还有定时器的话，就清除掉，所以这个就是mounted钩子的if判断的原因
    */
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(this.getConsole, 1000);
    }
  },
  methods: {
    getConsole() {
      console.log("定时器");
    },
  },
  beforeDestroy() {
    if(this.timer){
    clearInterval(this.timer);
    this.timer = null;
     }
  },

2. setTimeout定时执行

定时执行 setTimeout 是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是不再运行；

如下：等待2000毫秒后执行looper函数一次。

<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
    loop() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setTimeout(this.loop, 2000);
    },
    beforeDestroy() {
       if(this.timer){
      clearInterval(this.timer);
       this.timer = null;
       }
    }
  };
</script>