vue 定时器：setInterval和setTimeout使用实例及区别

js中定时器有两种，一个是循环执行setInterval，另一个是定时执行setTimeout

• 循环执行（setInterval）

循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

实例：配合dayjs实现钟表功能，显示实时时间

<template>
  <div id="app">
    {
    
    {
    
    this.datetime}}
  </div>
</template>

<script>
  export default {
    
    
    name: "app",
    data() {
    
    
      return {
    
    
        timer: '',
        datetime: ''
      }
    },
    mounted() {
    
    
      /* 每秒定时刷新 */
      this.timer = setInterval(() => {
    
    
        this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
        console.log(this.datetime)
      }, 1000)
    },
    beforeDestroy() {
    
    
      /* 离开页面前销毁定时器 */
      if(this.timer){
    
    
        clearInterval(this.timer);
      }
    }
  };
</script>

<style lang="less" scoped>

</style>

vue 使用dayjs：https://blog.csdn.net/weixin_42201180/article/details/107832001

• 定时执行 （setTimeout）

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

用法是setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

实例：解决初始化页面echarts渲染出错问题

<template>
  <div id="app">
    延时渲染chart
  </div>
</template>

<script>
  export default {
    
    
    name: "app",
    data() {
    
    
      return {
    
    
        timer: '',
      }
    },
    mounted() {
    
    
      /* 延时渲染chart */
      this.timer = setTimeout(() => {
    
    
        this.initEchart()
      }, 0)
    },
    methods: {
    
    
      initEchart(){
    
    
      	// 此处chart代码省略
        ...
      }
    },
    beforeDestroy() {
    
    
      /* 离开页面前销毁定时器 */
      if (this.timer) {
    
    
        clearTimeout(this.timer);
      }
    }
  };
</script>

<style lang="less" scoped>

</style>

vue使用echarts见：vue 引入echarts及实例