在主循环中加载ajax请求

Question

大家好，所以我正在研究用JavaScript编码的多人游戏，我想从数据库中获取数据（x，y坐标）并将其插入JavaScript中，这将是流畅的动画，问题在于ajax无法快速（25 fps）加载数据如何插入数据？

首先，boatPosX和boatPosY在文件的开头硬编码为canvas.width / 2和canvas.height / 2。然后是单击按钮事件，它会检查当你向右走f.e时，boatPosX在画布上增加5px。并且每次移动后，使用ajax将x y坐标发送到数据库。现在其他玩家必须看到对手在轮到他的时候在画布上移动，因此我们需要在render（）主循环中几乎实时地从数据库中获取xy数据，并使用来自数据库的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();

  };