如何在纯javascript中等待动画完成

当我点击一个想要的div时，它将居中于一个想要的位置，如果我点击靠近居中位置的项目，一切正常，但是如果他离中心超过1个位置，它会触发一种不符合通常逻辑的效果

我试着通过检查距离中心的距离来解决这个问题，然后将项目移动1×1 n次，但我猜因为循环没有等到动画完成，我得到了这个奇怪的效果

最终的结果应该是，当您单击一个距离中心5个位置的项目时，会给旋转木马带来无限的感觉，它将使其居中，而看不见的项目将从各自的方向滑动以创建一个循环

任何帮助都将不胜感激，我对网络开发人员来说是比较新的，所以一个解释得很好的答案将不胜感激

JS:

const serviceList=document.queryselectoral（'.service__块'）；
serviceList.forEach（服务=>{
service.addEventListener（'click'，（）=>{
标记SelectedService（服务）；
移动服务（检查距离（服务））；
});
});
//将类添加到单击的服务
功能标记SelectedService（服务）{
removeSelectedClass（）；
service.classList.add（'selected'）；
}
//从所有服务中删除选定的类
函数removeSelectedClass（）{
serviceList.forEach（服务=>{
service.classList.remove（'selected'）；
});
}
//检查与中心的距离
功能检查距离（服务）{
让距离=service.dataset.order-4；
返回距离；
}
//将服务移动1 n次
功能移动服务（距离）{
如果（距离>0）{
对于（变量i=0；i{
service.dataset.order=parseInt（service.dataset.order）-1；
if（parseInt（service.dataset.order）=-1）{
service.dataset.order=11；
}
});
}
}否则如果（距离<0）{
距离=距离*-1；
对于（变量i=0；i{
service.dataset.order=parseInt（service.dataset.order）+1；
if（parseInt（service.dataset.order）==12）{
service.dataset.order=0；
}
});
}
}
}

链接到代码笔：

---

如果要等待动画结束触发下一个动画，请插入setInterval并将间隔时间设置为动画的时间。 例如：

更新

试了几次之后，我想我已经按照你的意愿工作了，尽管这不是更好的方法。 我复制了图标列表，一个在右侧，一个在左侧，这样图标只会在远离用户视图时移动到另一侧，不会触发该行为

代码如下：

---

如果要等待动画结束触发下一个动画，请插入setInterval并将间隔时间设置为动画的时间。 例如：

更新

试了几次之后，我想我已经按照你的意愿工作了，尽管这不是更好的方法。 我复制了图标列表，一个在右侧，一个在左侧，这样图标只会在远离用户视图时移动到另一侧，不会触发该行为

代码如下：

---

现在的问题是，它实际上是一步一步地完成了每个步骤，我需要的是动画到.5s才能到达中心，不管它有多远，但问题是，如果你可以在位置9的项目上移动，它会根据需要移动到位置4，但项目1、2、3会直接移动到新位置9、10，11他们不需要遵循补丁，而是需要通过1乘1（-1）的方式到达那里。您提供的解决方案解决了问题，但它所产生的效果与我需要的不同。非常感谢你抽出时间来帮助我！现在的问题是，它实际上通过了每个步骤1到1，我需要的是动画到.5s才能到达中心，不管它有多远，但问题是，如果你可以在位置9的项目上移动，它会根据需要移动到位置4，但项目1、2、3会直接移动到它们的新位置9、10，11他们不需要遵循补丁，而是需要通过1乘1（-1）的方式到达那里。您提供的解决方案解决了问题，但它所产生的效果与我需要的不同。非常感谢你抽出时间来帮助我！

const serviceList = document.querySelectorAll('.service__block');

serviceList.forEach(service => {
  service.addEventListener('click', () => {
    markSelectedService(service);
    moveService(checkDistance(service));
  });
});

//Adds the class to the clicked service
function markSelectedService(service) {
  removeSelectedClass();
  service.classList.add('selected');
}

//Removes the selected class from all the services
function removeSelectedClass() {
  serviceList.forEach(service => {
    service.classList.remove('selected');
  });
}

//Check distance from center
function checkDistance(service) {
  let distance = service.dataset.order - 4;
  return distance;
}

//Move the service 1 by 1 n times
function moveService(distance) {
  if (distance > 0) {
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) - 1;
        if (parseInt(service.dataset.order) === -1) {
          service.dataset.order = 11;
        }
      });
    }
  } else if (distance < 0) {
    distance = distance * -1;
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) + 1;
        if (parseInt(service.dataset.order) === 12) {
          service.dataset.order = 0;
        }
      });
    }
  }
}

var i = 0;
var animationInterval = setInterval(function () {

   //YOUR LOGIC HERE

   if (++i === distance) {
     window.clearInterval(animationInterval);
   }
}, 500);