async await 实现Sleep 等待效果

一、问题描述

在工作中，地图中的车辆需要随着GPS移动，这样就需要地图的中心点是以车子为中心的，直接调用setCenter改变中心点的位置，当屏幕很大的时候，用户就觉得很晃眼，最好的方式就是用flyto函数，实现地图的平移顺滑移动。

但是早期版本API 中没有flyto，解决办法就是将当前中心点到最终的中心点拆成若干个节点，然后快速刷新，实现小步快跑，提高用户体验。

问题：要保证拆分的中间点要等待页面刷新之后才能启动下一个中心点

二、如何保证刷新顺序

想到的是使用 sleep 的思想，渲染完当前中心点之后，即当下一次渲染的时候，有一个等待渲染的时间，这样就能自己控制节奏了。

为什么要选用 aysnc 和 await 呢？

使用 aysnc 和 await ，就充分的利用了 js 单线程的优势，当其他回调函数需要再次设置中心点的时候，一定是要处理完当前的逻辑，然后才会执行下一次的中心点变化，保证了 整个线路的顺序

三、Vue 代码案例

<template>
  <div class>
    <div id="hmap" style="height: 200px;width: 200px;">
      {{msg}}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    this.sleepAction()
  },
  methods: {
    sleepAction () {
      const MAX = 4
      const betweenTime = 2000
      const that = this

      for (let i = 1; i <= MAX; i++) {
        // console.log(betweenTime * i)
        this.wait(betweenTime * i, function () {
          console.log('111111111111111', betweenTime * i)
          that.msg = betweenTime * i
        })
      }
    },
    sleep2 (time) {
      return new Promise((resolve) => {
        setTimeout(resolve, time)
      })
    },
    // async await
    async wait (time, fun) {
      await this.sleep2(time)
      if (fun) {
        fun()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>