On ajoute un bouton dans le HTML :
<div>
<label for="b3">Arrêter la simulation en mode automatique :</label>
<input id="bouton_arret_auto" type="button" value="Arrêter la simulation automatique">
</div>
On modifie la fonction evolution_auto() dans le js :
function evolution_auto(){
IntervalID=setInterval(evolution, 1000);
}
On ajoute un détecteur d’évènement dans le js sur le bouton nouvellement crée :
bouton_arret_auto=document.getElementById("bouton_arret_auto");
bouton_arret_auto.onclick=arret_evolution_auto;
On ajoute une fonction pour arrêter l’appel automatique déclenché par IntervalID :
function arret_evolution_auto(){
clearInterval(IntervalID);
}
Le problème initial avec la fonction evolution_auto()
function evolution_auto(){
evolution();
setInterval(evolution_auto, 1000);
}
était qu’il s’agissait d’une fonction qui s’appelait elle-même et qu’il était difficile de mettre fin à ces appels multiples.