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

Question

我正在写一个游戏的功能：

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;
            }
        }

        ***

    }
    
}

当循环开始并且不等待上述事件完成时，函数循环中的“if语句”运行并立即递增“i”多次。

我在 google 和 stackoverflow 中搜索了使用“async await”和“promise”来解决问题，但并没有真正理解它是如何工作的，所以无法在我的代码中实现它。

Answer 1

这应该有效，虽然我没有测试它而且你做的事情不是用 javascript 方式

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.id);
      color = event.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);
  });
}