尝试使用JavaScript将元素设置为不同位置的动画

基于w3学校的本教程，我编写了一个函数（move），该函数使用setInterval（）方法为元素（div）设置动画，我的问题是，当我尝试调用函数move（）时，div多次出现意外行为，我尝试使用async/await，但都不起作用

异步函数moveArray（目标）{
//在地址数组中移动
for（设i=0；i位置x？1:-1；
元素样式左=位置x+“px”；
}
如果（位置y！=添加y）{
位置y+=添加位置y>位置y？1:-1；
元素样式顶部=位置y+“px”；
}
}
}
}

#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#反对{
宽度：50px；
高度：50px；
位置：绝对位置；
背景：红色；
}

移动
//要设置动画的对象

之所以会出现这种奇怪的行为，是因为在

for

循环中同时调用了

move

函数。这是因为异步函数不知道何时完成

不要使

move

异步（如果它没有等待任何东西，则不必进行异步），而是从一开始就返回

Promise

，并在其中调用动画代码。当到达动画必须结束的点时，

解决

承诺

这样做将使

for

循环中的

wait

语句等待

move

函数到达

resolve

调用，然后继续下一个动画

异步函数moveArray（目标）{
//在地址数组中移动
for（设i=0；i{
var elem=document.getElementById（“对象”）；
var id=设置间隔（第15帧）；
函数框架（）{
if（pos.x==add.x&&pos.y==add.y）{
清除间隔（id）；
//达到目标时履行承诺。
解决（）；
}否则{
如果（位置x！=添加位置x）{
位置x+=添加位置x>位置x？1:-1；
元素样式左=位置x+“px”；
}
如果（位置y！=添加y）{
位置y+=添加位置y>位置y？1:-1；
元素样式顶部=位置y+“px”；
}
}
}
});
}

#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#反对{
宽度：50px；
高度：50px；
位置：绝对位置；
背景：红色；
}
移动
//要设置动画的对象