没有按钮时，如何防止获取请求重新加载 Javascript 中的页面？

Question

Let me preface this by saying there are endless threads that describe the issue WITH a button involved. Usually it's solved by just calling event.preventDefault() on the event you pass in. But what if the post request is called after something happens that isn't within the user's control, for instance, after a certain amount of frame?

makeScore (userId, gameId, time) {
      fetch('http://localhost:3000/scores', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          time: time,
          user_id: userId,
          maze_id: gameId
        })
      }).catch(error => console.log('ERROR'))
    };

    loadNextLevel(option) {

        console.log("Load Next");

        //  Making a score
        clearInterval(this.interval);
        this.time = document.getElementById('timer_text').innerHTML;
        this.makeScore(this.userId, this.gameId, this.time);
        console.log("Score made");

        if (this.GAMESTATE != GAMESTATE.GAMEOVER) {

        console.log(this.gameObjects);
        document.getElementById('timer_text').innerHTML = "Time"
        this.gameObjects = []
        this.gameIndex += 1;

        console.log(this.gameIndex, this.maxMazes);

        if (option == "new") {
          this.gameIndex = 0;
        }
      }

      if (this.gameIndex >= this.maxMazes) {
        this.gameEnd();
        return;
      }

With this code, I want to call makeScore only after loadNextLevel is called, and that is only getting called when a level is completed. But, currently the score is saved, and the page is refreshed. How can I prevent this refresh?

Edit: added scores controller below

class ScoresController < ApplicationController

    def index
        scores = Score.all
        render json: scores
    end

    def show
        score = Score.find(params[:id])
        render json: score
    end

    def create
        if (params[:user_id] && params[:maze_id])
            user = User.find_by(id: params[:user_id])
            maze = Maze.find_by(id: params[:maze_id])
            score = user.scores.build(time: params[:time], username: user.username)
            maze.scores << score
        end
    end

end

Edit #2 - Adding the function that it apparently gets stuck on after the fetch is completed.

function setLoggedOutUI() {
  console.log("Log out UI set");
  document.getElementById("timer_text").style.display = "none";
  document.getElementById("logInButton").innerHTML = "Log in";
  document.getElementById("userInfo").innerHTML = "Please Log in to play";
  document.getElementById("logInField").style.display = "inline-block";
  document.getElementById("play").innerHTML = "Log in";
  document.getElementById("scores").style.display = "none";
  document.getElementById("usernameText").style.display = "inline";
  uiSwitch = false;
}

Answer 1

I had this same issue, in my case the problem was caused by the live server. I had in the same folder the client (HTML,CSS, JS, etc.) and the database (I was using the json-server extension). The problem was that the live server was detecting the changes in the db.json file. When fetch post or delete data, it triggers the live reload in the live server extension. So I solved it by dividing the folders and opening them separately in vs code, then, inside the client folder, run live server and it worked perfectly.