Estoy tratando de hacer que mi función setTimeout sea reutilizable. Pero cada vez que paso el valor de remainingTime , no disminuye.
console.log(remainingTime); devuelve repetidamente 99 en lugar de disminuir, es decir, 98 , 97 .
¿Algunas ideas?
let remainingTimeToSolveQuiz = 100; const timeRemainingEl = document.querySelector("#time-remaining"); function quizCountDown(remainingTime, elementToDisplayTime) { remainingTime--; console.log(remainingTime); if (remainingTime === 0) { // something clearTimeout(timer); } elementToDisplayTime.textContent = remainingTime; } let quizTimer = setInterval(quizCountDown, 1000, remainingTimeToSolveQuiz, timeRemainingEl); <div> Time: <span id="time-remaining"></span> </div>Estás pasando el valor inicial de remainingTimeToSolveQuiz a setInterval . Esto se pasa por valor, por lo que no cambia con cada ciclo.
Básicamente, cada vez que se ejecuta la función quizCountDown , se utiliza el valor inicial de 100 en lugar del valor actualizado.
Elimine el remainingTimeToSolveQuiz de TimeToSolveQuiz pasado al intervalo y, en su lugar, use la variable real dentro de su función quizCountDown .
También asegúrese de que su variable quizTimer esté inicializada y que la haga referencia correctamente en clearTimeout .
let quizTimer; function quizCountDown(elementToDisplayTime) { remainingTimeToSolveQuiz--; console.log(remainingTime); if (remainingTimeToSolveQuiz === 0) { // something clearTimeout(quizTimer); } elementToDisplayTime.textContent = remainingTimeToSolveQuiz; } quizTimer = setInterval(quizCountDown, 1000, timeRemainingEl); Como nota al margen, realmente no recomiendo usar setInterval o setTimeout si desea medir el tiempo con precisión. Siempre será una aproximación.
Si establece un intervalo de 1000 ms, siempre estará un par de milisegundos apagado, lo que puede sumar grandes imprecisiones durante un período de tiempo más largo.
Un enfoque más eficaz sería utilizar marcas de tiempo para calcular el tiempo transcurrido desde un punto de partida inicial almacenado.
Su setInterval está llamando a la función cada segundo. Cada vez que se llama, está pasando los mismos parámetros, uno de los cuales es un valor de 100 . Entonces, cada vez que se llama a su función, está pasando 100 y su función hace lo que se le pide que haga, reste 1. Es por eso que ve que 99 se repite.
Solución: Una variable global para controlar el tiempo:
let quizTime = 100; // global variable stores the quiz time const timeRemainingEl = document.querySelector("#time-remaining"); let quizTimer; function quizCountDown(elementToDisplayTime) { if (quizTime === 0) { // something clearTimeout(quizTimer); } elementToDisplayTime.textContent = quizTime; console.log(quizTime); quizTime--; // Calling this last starts your quiz timer with 100 } quizTimer = setInterval(quizCountDown, 1000, timeRemainingEl); <div> Time: <span id="time-remaining"></span> </div> Además, ayuda llamar a quizTime-- last. Porque entonces su temporizador mostrará 100 inicialmente.