如何在函數再次調用之前結束函數

Question

我的loadGame（）函數中有一個addEventListener，每次點擊newGame按鈕時，它都會啓動loadGame（），但loadGame（）中沒有返回值，所以每次點擊newGame按鈕重新啓動遊戲，但模板[i]的eventListeners似乎重疊，所以如果我點擊10次newGame，然後點擊循環的else語句，它將運行tryAgain（）10次。如何在點擊newGame時退出我正在使用的功能？我試圖在loadGame（）的末尾添加一個return語句，但沒有做任何事情。

newGame.addEventListener('click', function(){ 
    changeDifficulty(); 
}); 

function changeDifficulty(){  
      loadGame();   
    } 

循環中loadGame（）

for (var i = 0; i < template.length; i++) { 
    //add colors to squares 
    template[i].style.backgroundColor = colors[i]; 

    template[i].addEventListener('click', function(){ 
     var clickedColor = this.style.backgroundColor; 

     if(clickedColor === correctColor) { 
      clearInterval(timeout); 
      message.innerHTML = "Correct!"; 
      newGame.textContent = "Play Again?"; 
     } 
     else { 
      fails++; 
      tryAgain(difficulty); 
      this.style.backgroundColor = "#232323"; 
      message.innerHTML = "Wrong!" 
     } 
    }); 

Answer 1

你需要註冊新的之前刪除的事件監聽器：

function loadGame() { 
    // <...> 
    for (var i = 0; i < template.length; i++) { 
     //add colors to squares 
     template[i].style.backgroundColor = colors[i]; 

     template[i].addEventListener('click', clickHandler); 
    } 
    // <...> 
} 

function changeDifficulty() { 
    // remove all event listeners 
    for (var i = 0; i < template.length; i++) { 
     template[i].removeEventListener('click', clickHandler); 
    }  
    // Then call loadgame 
    loadGame();   
} 

function clickHandler(e) { // We need to be able to reference this function by name 
    var clickedColor = e.target.style.backgroundColor; 

    if(clickedColor === correctColor) { 
     clearInterval(timeout); 
     changeColorsOnWin(correctColor, template); 
     message.innerHTML = "Correct!"; 
     newGame.textContent = "Play Again?"; 
    } 
    else { 
     fails++; 
     tryAgain(difficulty); 
     this.style.backgroundColor = "#232323"; 
     message.innerHTML = "Wrong!" 
    } 
}