如何讓循環等待事件監聽器？

Question

我正在嘗試創建一個拋硬幣游戲，您可以在其中設置要玩的游戲數量，然后為每次迭代選擇正面或反面。 但是我for循環不會等待 eventListener，並且在用戶單擊一次之前循環就結束了。

function play(){
    head.addEventListener("click", choice);
    tails.addEventListener("click", choice);
}
function choice(e){
    let random = Math.floor(Math.random() *2);
    console.log(random);
    let clicked = e.target;
    e.target.style.border = "3px solid green";
    head.removeEventListener("click", choice);
    tails.removeEventListener("click", choice);
    if (random == 0){
        result.src = head.src;
        result.style.height = "100%";
        if(result.src == clicked.src){
            result.style.border = "3px solid green";
            
        }
        else{
            result.style.border = "3px solid red";
            
        }
    }
    if (random == 1){
        result.src = tails.src;
        result.style.height = "100%";
        if(result.src == clicked.src){
            result.style.border = "3px solid green";
            
        }
        else{
            result.style.border = "3px solid red";
            
        }
    }
    setTimeout(refresh, 3000);
    function refresh(){
        result.style.border = "none";
        clicked.style.border = "none";
    }

}

function wait(){
for (let i = 0; i < playAmount; i++){
    console.log(i);
    play();
}
}
wait();

先感謝您！

Answer 1

你可以不用 for 循環來解決這個問題。 只需在開始時使用變量 count = 0 和 flag = false 。 現在只需按照下面的程序進行操作

var count = 0 , flag = true ;
    flag&&head.addEventListener("click", choice);
    flag&&tails.addEventListener("click", choice);
function choice(e){
    if(count>=playAmount)flag=false;
    else count++;
    let random = Math.floor(Math.random() *2);
    console.log(random);
    let clicked = e.target;
    e.target.style.border = "3px solid green";
    head.removeEventListener("click", choice);
    tails.removeEventListener("click", choice);
    if (random == 0){
        result.src = head.src;
        result.style.height = "100%";
        if(result.src == clicked.src){
            result.style.border = "3px solid green";
            
        }
        else{
            result.style.border = "3px solid red";
            
        }
    }
    if (random == 1){
        result.src = tails.src;
        result.style.height = "100%";
        if(result.src == clicked.src){
            result.style.border = "3px solid green";
            
        }
        else{
            result.style.border = "3px solid red";
            
        }
    }
    setTimeout(refresh, 3000);
    function refresh(){
        result.style.border = "none";
        clicked.style.border = "none";
    }

}

我希望這能解決你的問題。

Answer 2

讓我們 go 通過您實施的一些關鍵部分（參考我的內聯評論）

function play() { 
  head.addEventListener("click", choice);
  tails.addEventListener("click", choice);
  
  //the above 2 lines add a click event listener to the two buttons,
  //that is, whenever these 2 buttons are clicked,
  //the function `choice` will be called
}
function choice(e) {
  let random = Math.floor(Math.random() * 2);
  console.log(random);
  let clicked = e.target;
  e.target.style.border = "3px solid green";
  head.removeEventListener("click", choice);
  tails.removeEventListener("click", choice);
  
  //the above 2 lines remove the click event listener from the two buttons
  //that is, now the function `choice` will not be called at button click 
  
  if (random == 0) {
    result.src = head.src;
    result.style.height = "100%";
    if (result.src == clicked.src) {
      result.style.border = "3px solid green";
    } else {
      result.style.border = "3px solid red";
    }
  }
  if (random == 1) {
    result.src = tails.src;
    result.style.height = "100%";
    if (result.src == clicked.src) {
      result.style.border = "3px solid green";
    } else {
      result.style.border = "3px solid red";
    }
  }
  setTimeout(refresh, 3000);
  function refresh() {
    result.style.border = "none";
    clicked.style.border = "none";
  }
}

function wait() {
  for (let i = 0; i < playAmount; i++) {
    console.log(i);
    play();
    //calls the play function `playAmount` times
  }
}
wait();

現在讓我們討論一下這種方法的問題

1. 從wait()調用play() function playAmount次（嘗試）將點擊事件偵聽器綁定（添加）到兩個按鈕playAmount次，但是添加相同的 function n次作為事件偵聽器與添加一次相同，參考: addEventListener 文檔
2. 一旦choice被調用，你從兩個按鈕中刪除事件監聽器（記住，事件監聽器只在wait()函數的循環中綁定一次），現在按鈕上沒有綁定事件監聽器，按鈕不會注冊事件點擊了。

下面的實現應該適合你：

let numberOfTurnsTaken = 0;
//add a global variable to count the turns taken

function play() { 
  head.addEventListener("click", choice);
  tails.addEventListener("click", choice);
  //bind the event listeners
}
function choice(e) {
  numberOfTurnsTaken++;
  //increment the turns
  let random = Math.floor(Math.random() * 2);
  console.log(random);
  let clicked = e.target;
  e.target.style.border = "3px solid green";

  //remove the event listeners only when the turns are over and we are `handling` the last turn
  if(numberOfTurnsTaken == playAmount){
    head.removeEventListener("click", choice);
    tails.removeEventListener("click", choice);
  }
  
  if (random == 0) {
    result.src = head.src;
    result.style.height = "100%";
    if (result.src == clicked.src) {
      result.style.border = "3px solid green";
    } else {
      result.style.border = "3px solid red";
    }
  }
  if (random == 1) {
    result.src = tails.src;
    result.style.height = "100%";
    if (result.src == clicked.src) {
      result.style.border = "3px solid green";
    } else {
      result.style.border = "3px solid red";
    }
  }
  setTimeout(refresh, 3000);
  function refresh() {
    result.style.border = "none";
    clicked.style.border = "none";
  }
}

//set things rolling by binding click event handlers on the buttons
play();


//the loop is no longer needed
//function wait() {
//  for (let i = 0; i < playAmount; i++) {
//    console.log(i);
//    play();
//  }
//}
//wait();