Question

我有一个div，我想要一次又一次地转换不同的时间。该div的新位置已通过名为movePlayer的数组馈送到journey函数。然后将这些数据转换为转换坐标，并设置为我的div上的样式。

我已经尝试了几天的时间来进行for循环，直到触发transitionend事件，然后再继续进行下一次迭代。 listenForMoveFinish函数仅在转换完成后才能正确响应，但是我无法让for循环在将此答复计入下一次迭代之前等待此答复。

我尝试用内联注释禁用规则，将for循环的各个部分分成单独的异步函数，并移动promise的级别，但是我不知道如何解决此问题。抱歉，缺少有效的代码，但是有很多功能和astar路径查找库使我明白了这一点。

有人可以建议为什么这不起作用吗？

function movePlayer(journey) {
  let timePlus100 = 100;//removed 'playerInfo.playerSpeed + ' to test
  return new Promise((resolve, reject) => {
    /* eslint-disable no-await-in-loop */
    for (let i = 0; i < journey.length; i++){
      (async function(){
        try {
          let nextX = journey[i].y;//?SWITCHED X AND Y AS ASTAR SWITCHES IN GRAPH
          let nextY = journey[i].x;//?SWITCHED X AND Y AS ASTAR SWITCHES IN GRAPH
          let fromTop = (26 + (nextX * 16) + (nextY * 16)) + "px";
          let fromLeft = (576 + (nextX * 32) - (nextY * 32)) + "px";
          let translateXYZ = "translate3d(" + fromLeft + ", " + fromTop + ", 0px)";
          document.getElementById("playerLayer").style.transform = translateXYZ;
          moveStatus = await listenForMoveFinish();
          if (i === journey.length - 1) {
            setTimeout(function(){resolve("complete"); }, timePlus100);
          }
        } catch (err) {
        }
      })();
    }
    /* eslint-enable no-await-in-loop */
  })
}

function listenForMoveFinish(){
  return new Promise(resolve => {
    playerLC.addEventListener('transitionend', function() {
      resolve(2);
    });
  });
}

for循环中将忽略异步

0 个答案: