J'essaie de mettre en œuvre un chronomètre. Lorsque le bouton Démarrer est enfoncé, SetInterval est appelé. Comment puis-je m'arrêter en exécutant ClearInterval lorsque vous appuyez sur le bouton d'arrêt, sans avoir une variable globale à transmettre en tant que paramètre à ClearInterval
<body>
<p class="clock">00:00:00</p>
<button class='start'>Start</button>
<button class="stop">Stop</button>
<script>
let totalMilliSeconds = 0;
function tick(){
totalMilliSeconds++;
let hours = Math.floor(totalMilliSeconds/3600)
let minutes = Math.floor(totalMilliSeconds/3600)
let seconds = Math.floor(totalMilliSeconds/360)
document.querySelector('.clock').textContent = `${hours}:${seconds}:${totalMilliSeconds}`
}
function start(){
return setInterval(tick,1)
}
document.querySelector('.start').addEventListener('click',start)
document.querySelector('.stop').addEventListener('click',start)
</script>
<p>
</body>
</html>
3 Réponses :
Vous devez simplement utiliser l'ID d'intervalle retourné par alors vous pouvez faire seinterval () . Dans votre cas, vous pouvez faire quelque chose comme ça: ClearInterval (intervalide) quand vous le souhaitez.
Laisser définit une variable locale bloquée. Sûrement à la portée "racine", il est toujours global @kaiido? Local to Global est toujours mondial?
Vous devrez clairement stocker la référence à l'intervalle quelque part . Ce n'est pas clair ce que vous entendez par ne pas avoir une variable globale; Une solution serait de le déclarer au sommet: grâce à JS SCOPES, la variable intervalle sera disponible dans toutes les fonctions déclarées dans le script.
Si vous souhaitez éviter les variables globales, vous pouvez envelopper le tout dans la déclaration de fonction, puis l'appelez immédiatement. Toute variables déclarées avec Exemple Utilisation de l'échantillon de code de Christoph: P> var code> ou let code> n'existera que dans la portée de la fonction. (function() {
let totalMilliSeconds = 0;
let interval = null;
function tick(){
totalMilliSeconds++;
let hours = Math.floor(totalMilliSeconds/3600)
let minutes = Math.floor(totalMilliSeconds/3600)
let seconds = Math.floor(totalMilliSeconds/360)
document.querySelector('.clock').textContent = `${hours}:${seconds}:${totalMilliSeconds}`
}
function start(){
if (!interval) interval = setInterval(tick,1);
return interval;
}
function stop() {
if (interval) clearInterval(interval);
interval = null;
}
document.querySelector('.start').addEventListener('click',start)
document.querySelector('.stop').addEventListener('click',stop)
})();
TotalMilliseconds est une variable globale, alors pourquoi ne pas avoir l'intervalle en tant que global?