Загрузить ajax-запрос внутри основного цикла

Question

Привет, ребята, так что я работаю над многопользовательским режимом, написанным на JavaScript, и я хотел бы взять данные (координаты x, y) из базы данных и вставить их в JavaScript, и это будет плавная анимация, проблема в том, что ajaxНе можете загрузить данные так быстро (25 кадров в секунду), есть идеи, как вставить данные?

Сначала в начале файла жестко кодируются boatPosX и boatPosY как canvas.width / 2 и canvas.height / 2сказать.Затем есть события нажатия кнопки, которые проверяют, что, когда вы идете вправо, boatPosX увеличивается на 5 пикселей на холсте.И координаты xy отправляются в базу данных с ajax после каждого перемещения.Теперь другие игроки должны видеть, как оппонент движется на холсте, когда наступает его очередь, и, таким образом, нам нужно получать данные xy из базы данных почти в реальном времени внутри основного цикла render () и рисовать графику, используя данные xy из базы данных.

function render(viewport) {   
    context.save();
  //  if(Math.floor(boatPosX / 36) < 10) {
      context.translate(view.x, view.y);
    //}
    //if(Math.floor(boatPosX / 36) == mapArray.length)

    requestAnimationFrame(render);

    var oldPosX = boatPosX;
    var oldPosY = boatPosY;

    var oldViewX = view.x;
    var oldViewY = view.y;

    for (let i = 0; i < mapArray.length; i++) {
      for (let j = 0; j < mapArray[i].length; j++) {

        if (mapArray[i][j] == 0 || 3) {
          this.sprite.draw(
            background,
            190,
            230,
            26,
            26,
            j * this.sprite.width,
            i * this.sprite.height,
            this.sprite.width,
            this.sprite.height
          );
        }
        if (mapArray[i][j] == 1) {
          this.sprite.draw(
            background,
            30,
            30,
            26,
            26,
            j * this.sprite.width,
            i * this.sprite.height,
            this.sprite.width,
            this.sprite.height
          );

        }
        if (mapArray[i][j] == 2) {
          this.sprite.draw(
            background,
            200,
            20,
            26,
            26,
            j * this.sprite.width,
            i * this.sprite.height,
            this.sprite.width,
            this.sprite.height
          );
        }
        if(Math.floor(boatPosX / 36) == mapArray[i].length - 2) {
          //console.log("finish");
          //boatPosX = Math.floor(mapArray[i].length * 36);
          moveCharacter = false;
          boatPosX = 580;
          endGame();
        }
      }
      //console.log(Math.floor(mapArray[i].length * 36));
    }
$.ajax({
  method: 'get',
  url : 'multiplayer/x.php',
  success : function(data){
    this.ship.drawimage(boat, data, boatPosY, 50, 50);
  }
})
    this.ship.drawimage(boat, boatPosX, boatPosY, 50, 50);
    this.ship2.drawimage(boat, boatPosX2, boatPosY2, 50, 50);
    if (view.x == -105) {
      view.x = -105;
    }
    //console.log(view.x)
    var lineHeight = 16 * 2.286;
    var textWidth = context.measureText(theArray[moveCount].question).width * 3;
    context.textAlign = 'left';
    context.textBaseline = 'top';
    context.font="14px Verdana";
    context.fillStyle = 'rgba(0, 0, 0 ,0.9)';
    context.fillRect(boatPosX + ship.width / 2, boatPosY - ship.height / 2, textWidth, lineHeight);
    context.fillStyle = 'white';
    if(moveCount < theArray.length) {
        context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);
    }
    context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);

    answerBtn1.innerHTML = theArray[moveCount].answer1;
    answerBtn2.innerHTML = theArray[moveCount].answer2;
    if(isPositionWall(boatPosX + 36, boatPosY)) {
      //boatPosX = oldPosY;
      console.log("collision");
    }

    if(foundGold(boatPosX + 36, boatPosY)) {
      goldAmount+= 1;
      gold.innerHTML = goldAmount;
    }

    checkMoveCounter();
    //console.log(mapArray[Math.floor(boatPosX / 36)]);
    //console.log(mapArray[Math.floor(boatPosX / 36)][Math.floor(boatPosX / 36)]);

    //RENDER FUNCTION END



    context.restore();

  };