async await 实现Sleep 等待效果

Posted 2022-02-09 胖鹅68

文章目录

• 一、问题描述
• 二、如何保证刷新顺序
• 三、Vue 代码案例

一、问题描述

在工作中，地图中的车辆需要随着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>