Vue（echarts）中使用定时器setInterval和setTimeout

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

循环执行（setInterval）
用法是setInterval（“方法名或方法”，“延时的时间”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

<template>
  <section>
    <h1>setInterval</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0,
        arrInfo:[
        	{
        		key: '0',
        		title: '标题1'
        	},
        	{
        		key: '1',
        		title: '标题2'
        	},
        ]
      };
    },
    methods: {
      arrInfoGet() {
        // this.value ++;
        if(this.arrInfo.length == this.value ) { // 如果长度相等 则复原到 1
        	this.value = '1';
      	} else {
        	this.value ++;
      	}
      	this.massData(this.value);  // 此处是调用接口数据重新渲染echarts
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.arrInfoGet, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

上面的例子就是页面初始化的时候创建了一个定时器setInterval，时间间隔为1秒，每一秒都会调用一次函数get，从而使value的值加一。

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

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

上面是页面初始化时候创建一个定时器setTimeout，只在1秒后执行一次方法。

定时器需要在页面销毁的时候清除掉，不然会一直存在！！！