vue中使用setIntval实现地图分批渲染

项目中的问题

引用蜂鸟云地图，实现部署基站，但是数据库中的数据量很大，一下子全部渲染到地图页面，长事件运行控制台会有警告

requestAnimationFrame' handler took <N>ms

百度之后，大致了解到这个是因为画布绘制的原因，于是想要分批渲染基站到地图页面解决这个问题

数组分组

通过接口获取的基站数据的数组长度很大，需要分成每10个或者每20个一组的数组

		  this.stationArr = resp.data.data // 获取到的基站数据
          for (let i = 0, len = this.stationArr.length; i < len; i += 10) {
            this.resultArr.push(this.stationArr.slice(i, i + 10))
          }

经过分组后的数组结构如下

关于setInterval定时器

在网上查找了一些资料，大致了解到定时器要在mounted中声明，在destory中销毁，结合我的具体项目，实现了想要的效果

mounted() {
  if (this.timer) {
    clearInterval(this.timer)
  } else {
    this.timer = setInterval(() => {
      console.log('5S刷新一次数据')
    }, 5000)
  }
},
destroyed() {
  clearInterval(this.timer)
}

关于setTimeout

最一开始想到的是用setTimeout加for循环实现分批渲染，但是用模拟数据测试的时候，发现控制台直接打印了全部数据，并没有起到分批的效果，故弃用，后来不断发现原来里边还有更深层级的原理问题，这个稍后有时间再写一篇博客专门研究，找到了一个解释很细致的博客，分享到这里 https://www.cnblogs.com/Trista-l/p/7380830.html 有待更深的研究。

好了，回归正题

问题分析

添加计时器之前需要：

1.要在获取了全部基站之后，确保数据存在
2.要在地图插件引入之后，mapLoadComplete（）中添加定时器，不能在mounted中添加，否则渲染的操作会报错

解决方案

主要代码如下：

 destroyed() {
    clearInterval(this.timer)
    // 离开路由之后断开websocket连接
    this.webSocketOnClose()
    this.websocketclose()
  },
   methods: {
    // 添加定时器
    addSetInterval() {
      this.timer = setInterval(() => {
        if (this.resultArr.length < this.times) {
          console.log('清除定时器')
          console.log(this.resultArr.length)
          console.log(this.times)
          clearInterval(this.timer)
        } else {
          // 分批部署基站
          if (this.times < this.resultArr.length) {
            this.deployBaseStation()
            console.log('渲染数组的第' + this.times + '项')
          }
          this.times++
        }
      }, 1000)
    },
    // 分批部署基站
    deployBaseStation() {
      const temporaryArr = this.resultArr[this.times]
      for (let i = 0; i < temporaryArr.length; i++) {
        tzMap.set(temporaryArr[i].baseStationNum, temporaryArr[i])
        // 遍历获取到的已部署的基站的位置信息的数组，调用addMarker方法
        this.bubbleName = temporaryArr[i].baseStationName
        this.bubbleNameX = parseInt(temporaryArr[i].positionX)
        this.bubbleNameY = parseInt(temporaryArr[i].positionY)
        this.bubbleName = '@' + temporaryArr[i].baseStationNum + '@' + this.bubbleName + '<br/>' + '(' + this.bubbleNameX + ',' + this.bubbleNameY + ')'
        this.addMarkers(this.currentGid, temporaryArr[i], this.bubbleName)
      }
    },
    }