如何使循环在事件发生之前不继续？

Question

I am writing a function of a game:

function Game(){
    while(true){

        ***

        for(var i = 0; i < level; i++){
            var color;
            $(".btn").on("click", function(event) {
                ButtonClickResponse(this.id);
                color = this.id;
            });
            if(colorsOrder[i] != color){
                GameOver();
                return;
            }
        }

        ***

    }
    
}

the "if statement" in the loop of function runs and increments "i" immediately many times when loop is started and doesnt wait for an above event to finish.

I searched for solving with "async await" and "promise" in google and stackoverflow, but didn't really understand how it worked so couldn't implemet it in my code.

Answer 1

This should work, although I didn't test it and you do things not in javascript way

async function Game() {
  while (true) {
    var level = 1;
    $("#level-title").text("Level " + level);
    var colorsOrder = [];
    var randColor = GenerateRandomSquareColor();
    colorsOrder.push(randColor);
    ButtonClickResponse(randColor);

    for (var i = 0; i < level; i++) {
      var color;

      // await for the click event
      const event = await waitForClick($(".btn"));
      // do stuff with the result
      ButtonClickResponse(event.target.id);
      color = event.target.id;

      if (colorsOrder[i] != color) {
        GameOver();
        return;
      }

      level++;
    }
  }
}

function waitForClick(element) {
  // create new promise
  return new Promise((resolve) => {
    const handler = function (event) {
      // when button is clicked remove listener
      element.off("click", handler);
      // and resolve the promise
      resolve(event);
    };
    // listen for click
    element.on("click", handler);
  });
}