Comment terminer une fonction avant qu'elle ne soit appelée à nouveau

Question

J'ai un addEventListener dans mon loadGame() et chaque fois que j'appuie sur le bouton newGame, il lance loadGame(), mais je n'ai pas de valeur de retour dans loadGame() donc chaque fois que je tape Le bouton newGame relance le jeu, mais les eventListeners du template [i] semblent se chevaucher, donc si je tape 10 fois newGame, puis que je clique sur l'instruction else de la boucle, ça va essayer tryAgain() 10 fois. Comment puis-je quitter la fonction sur laquelle je suis quand je tape newGame? J'ai essayé d'ajouter une déclaration de retour à la fin de loadGame() mais cela n'a rien fait.

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

function changeDifficulty(){  
      loadGame();   
    } 

boucle dans 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

Vous devrez supprimer les écouteurs d'événements avant de vous inscrire de nouvelles:

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!" 
    } 
}