如何使一个函数等待另一个函数停止执行（Simon Game）

Question

I'm making a Simon Game and I've already added the logic but I don't know how to pause an execution until the player has pressed on a tile. I've made a function called user() that records users input and pushes it to the userSeq array. Then I made a function checkTurn() to check who's turn is next (the computer or the user). If it's the user's turn then I want in the else to wait for the user() function to finish and then call the callcheckClicks() to check if user's input is the same as computer's and then continue to the new level. Please help!

Here's a link: https://codepen.io/Teo03/pen/yPvbwY

 $(document).ready(function() { var green = document.getElementById("green"); var red = document.getElementById("red"); var yellow = document.getElementById("yellow"); var blue = document.getElementById("blue"); var tile = document.getElementsByClassName("tile"); //audio for every click var audio = [ new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"), new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"), new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"), new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3") ]; // record the round var round = 0; // record the random presses var compSeq = []; //record user clicks var userSeq = []; //if it's false computer moves var turn = false; //round number var round = 0; //count how many moves user does var playerIndex = 0; //start $(".start").click(function() { round++; turn = false; $("#round") .html("Round: " + round) .show(); $(".start, .reset").hide(); checkTurn(); }); function addNewRandomNumber() { var random = Math.floor(Math.random() * 4) + 1; computer(random); console.log("random" + random); } // call the computer to make an action function callComp() { addNewRandomNumber(); enableClicks(); turn = true; checkTurn(); } function callCheckClicks() { checkClicks(); } //check every time the user clicks if the user clicks are the same as the computer's function checkClicks() { console.log("random clicks: " + compSeq); //if user guess is correct if (userSeq[playerIndex] == compSeq[playerIndex]) { if (userSeq[playerIndex].length == compSeq[playerIndex].length) { // if they are then it's computer's turn callComp(); } else { playerIndex += 1; $(".start") .html("Next") .show(); // user is right, he can continue inputting another clicks if the sequence has checkTurn(); } } else { resetUserVariables(); // user is wrong } } //reset playerIndex function resetUserVariables() { playerIndex = 0; } //press a random button function computer(ran) { switch (ran) { case 1: blink(green); audio[0].play(); compSeq.push(1); break; case 2: blink(red); audio[1].play(); compSeq.push(2); break; case 3: blink(blue); audio[2].play(); compSeq.push(3); break; case 4: blink(yellow); audio[3].play(); compSeq.push(4); break; default: return; } console.log("random clicks: " + compSeq); enableClicks(); turn = true; checkTurn(); } //blink a tile function blink(tile) { $(tile).fadeOut("slow", function() { $(this).fadeIn("slow", function() { return; }); }); } //user input function user() { if ($(this).is("#green")) { userSeq.push(1); audio[0].play(); blink(green); playerIndex++; } else if ($(this).is("#red")) { userSeq.push(2); audio[1].play(); blink(red); playerIndex++; } else if ($(this).is("#blue")) { userSeq.push(3); audio[2].play(); blink(blue); playerIndex++; } else if ($(this).is("#yellow")) { userSeq.push(4); audio[3].play(); blink(yellow); playerIndex++; } turn = false; checkTurn(); console.log("user clicks: " + userSeq); } //add an event listener for user clicks function enableClicks() { for (var i = 0; i < tile.length; i++) { tile[i].addEventListener("click", user, false); } } //disable clicks when is computer's turn function disableClicks() { for (var i = 0; i < tile.length; i++) { tile[i].removeEventListener("click", user, false); } } //check who's turn is next function checkTurn() { if (turn === false) { //call computer callComp(); } else { callCheckClicks(); } } //document.ready(). }); 

 html * { text-align: center; background-color: #d3d3d3; } h1 { font-size: 60px; padding-bottom: 10px; } h3 { display: none; padding-bottom: 30px; } .circle { background: #d3d3d3; width: 320px; height: 320px; border-radius: 50%; border: 10px solid gray; margin: auto; } .tile { height: 150px; width: 150px; float: left; cursor: pointer; } #red { background-color: red; border-top-right-radius: 100%; } #green { background-color: green; border-top-left-radius: 100%; } #blue { background-color: blue; border-bottom-right-radius: 100%; } #yellow { background-color: yellow; border-bottom-left-radius: 100%; } btn { padding-top: 40px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <h1 class="text-center">Simon Game</h1> <div class="container text-center"> <h3 id="round">Round: </h3> <div class="circle"> <div class="tile" onclick="user()" id="green"></div> <div class="tile" onclick="user()" id="red"></div> <div class="tile" onclick="user()" id="yellow"></div> <div class="tile" onclick="user()" id="blue"></div> </div> <a class="btn start btn-default">Start</a> <a class="btn reset btn-default" onclick="reset()">Reset</a> <!-- container !--> </div> 

Answer 1

I believe what you are looking for is setTimeout()

This takes 2 parameters, your function and the number of milliseconds.

For example if you want to execute a function after three seconds of an onclick event...

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>

Then use a promise like explained here: Javascript - Wait the true ending of a function that uses setTimeout

Another thing to note is the flow of the program. Currently you are using a checkTurn method that calls a callCheckClicks method that calls a checkClicks and checkClicks calls checkTurn again. With this your program will end up crashing as it continuously loops forever. In order to do this you need to activate your if/else within your checkClicks to have

turn = true;
checkTurn();

To look like

function checkClicks() {
  console.log("random clicks: " + compSeq);
  //if user guess is correct
  if (userSeq[playerIndex] == compSeq[playerIndex]) {
    if (userSeq[playerIndex].length == compSeq[playerIndex].length) {
      // if they are then it's computer's turn
      callComp();
    } else {
      playerIndex += 1;
      $(".start")
        .html("Next")
        .show();

      // user is right, he can continue inputting another clicks if the sequence has
      turn=true;

      checkTurn();

    }
  } else {
    resetUserVariables(); // user is wrong
  }
}

Hope this is what you're looking for.