2020-10-22美图笔试 实现跑马灯动画效果

请至少使用一种方式显示一个跑马灯动画效果,页面每隔2s显示下一条用户信息.

const arr = [
‘A用户5秒前购买了…’,
‘B用户3秒前购买了…’,
‘C用户1秒前购买了…’,
]

第一眼看到觉得用单纯的setTimeout就可以实现效果,但是后来才明白这样只能循环一次,最终还是要依赖promise来实现,具体代码如下:

  <div id="box"></div>
  <script>
    const arr = [
      'A用户5秒前购买了...',
      'B用户3秒前购买了...',
      'C用户1秒前购买了...',
    ]

    const div = document.getElementById('box');

    async function changeMsg(arr) {
      while(true) {
        for(let i = 0 ; i < arr.length ; i++) {
          div.innerHTML = arr[i];
          await changeTime();
        }
      }
    }
    function changeTime() {
      return new Promise((reslove) => {
        setTimeout(() => {
          reslove();
        },2000)
      })
    }
    changeMsg(arr);

效果如下(刚开始的A没有录到):