echarts中setInterval的问题

img

tab栏切换echarts图表时，由于接口过慢，导致快速切换时，第一个的接口还没走完，就会点击第二次，这样就连续走两遍此接口，也会走两遍setInterval，这样图表就会混乱的问题 (比如：我先点击单位，会调单位接口，再点击类型，在快速切回单位，这时候单位的接口还没走完，这样就会连续走两遍单位接口，这样setInterval就会走两遍出问题)

切换调用接口时我是用watch监听去写的

img

那你就得多做点处理了，得给你的setTimeout拿一个变量接住，再切换的时候判断，如果存在就移除掉哦。如果还不知道怎么修改，就粘贴代码出来，我可以复制修改那种，给你参考参考

点击时给一个loading效果呢，接口调用成功之前不让切换，再就是后端优化一下接口

父页面tab切换：

<div>
          <span
            v-for="(item,index) in coursewareType"
            :key="index"
            class="coursewareBtn"
            :class="[index===findIndex?'actived':'actived1']"
            @click="chooseCourseware(item,index)"
          >
          {{item.title}}
          </span>
        </div>

tab切换：

chooseCourseware(item,index) {
    this.findIndex=index
 },
// 单位
      projectUnit(){
        //单位调用子页面方法
        setTimeout(() => {
          this.$refs.child.projectUnit();
        }, 1);
      },
      // 类型
      projectType(){
        //单位调用子页面方法
        setTimeout(() => {
          this.$refs.child1.projectType();
        }, 1);
      },
      // 专业
      projectMajor(){
        //单位调用子页面方法
        setTimeout(() => {
          this.$refs.child2.projectMajor();
        }, 1);
      },
    },
watch监听：
findIndex(newVal, oldVal){
  if(newVal == 0 && oldVal != 0){
     this.projectUnit()
  }
  if(newVal == 1 && oldVal != 1){
     this.projectType()
   }
  if(newVal == 2 && oldVal != 2){
     this.projectMajor()
   }
},

子页面

this.setInterValAl = setInterval(() => {
    if (option.dataZoom[0].endValue == this.provinceList.length - 1) {
       option.dataZoom[0].endValue = 6
       option.dataZoom[0].startValue = 0
     } else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
     }
        myChart.setOption(option,true)
 }, 2000)