Tengo un temporizador simple que debe pausarse o reiniciarse haciendo clic en un botón. Mi problema es que el intervalo sigue corriendo. Básicamente, guardo el identificador en la variable de time e intento restablecerlo cuando se hace clic en un botón de pausa o parada . La variable debe ser de acceso público, por lo que no sé dónde falla.
Aquí está el código (abreviado) en cuestión:
let total = 0; let minutes = 0; let seconds = 0; let hours = 0; let running = false; let time; $: normalizedHours = hours > 9 ? hours : `0${hours}`; $: normalizedMinutes = minutes > 9 ? minutes : `0${minutes}`; $: normalizedSeconds = seconds > 9 ? seconds : `0${seconds}`; $: title = `${normalizedHours}:${normalizedMinutes}:${normalizedSeconds}`; function run() { if (running) { return; } running = true; timer(); } function timer() { time = setInterval(() => { total++; if (seconds == 59) { seconds = 0; if (minutes == 9) { minutes++; } else if (minutes == 59) { minutes = 0; if (hours == 23) { hours = 0; } hours++; } else { minutes++; } } else { seconds++; } }, 1000); } function pause() { clearInterval(time); time = null; running = false; } function reset() { pause(); hours = 0; minutes = 0; seconds = 0; } const buttons = [ { title: "Play", click: run, icon: "play" }, { title: "Pause", click: pause, icon: "pause" }, { title: "Reset", click: reset, icon: "stop" }, ]; </script> <section> <form on:submit|preventDefault={run}> <div class="controls"> {#each buttons as { title, click, icon }} <button {title} on:click={click}> <i class={`fa fa-${icon}-circle`} /> </button> {/each} </div> <div class="time">{normalizedHours}</div> <span>:</span> <div class="time">{normalizedMinutes}</div> <span>:</span> <div class="time">{normalizedSeconds}</div> </form> </section>Aquí hay un enlace a la respuesta donde puede ver/depurar el problema.