La cuenta regresiva circular de 10 a 1 funciona correctamente pero quiero iniciar la cuenta regresiva nuevamente (de 10 a 1 sin recargar) después de una pausa de 3 segundos. He intentado usar setTimeOut dentro de setTimeOut pero no funciona. Aquí está el código.
var countdownNumberEl = document.getElementById('countdown-number'); var countdown = 10; countdownNumberEl.textContent = countdown; setInterval(function() { countdown = --countdown <= 0 ? 10 : countdown; countdownNumberEl.textContent = countdown; setInterval(function(){ countdownNumberEl.textContent = countdown; },3000) }, 1000); <div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>simplemente agregue 3 segundos como inicial y cambie textContent cuando sea menos de 10
let countdownNumberEl = document.getElementById('countdown-number'); let countdown = 10; countdownNumberEl.textContent = countdown; setInterval(function() { countdown = --countdown <= 0 ? 13 : countdown; if (countdown > 10) { return; } countdownNumberEl.textContent = countdown; }, 1000); <div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>Lo probé con una función de puntero. Detengo el intervalo al llegar a 1 y uso setTimeout() para comenzar un nuevo intervalo.
startInterval = () => { // setup markup and count let countdownNumberEl = document.getElementById('countdown-number'); let countdown = 10; countdownNumberEl.textContent = countdown; // start the interval intervalId = setInterval(function () { --countdown; if(countdown < 1) { // stop interval clearInterval(intervalId); // pause and start a new interval setTimeout(startInterval, 3000); } else { // update markup countdownNumberEl.textContent = countdown; } }, 1000); } startInterval(); <div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>Como mencionó que ha intentado resolver el problema con funciones setTimeout anidadas. También es posible hacer eso:
const countdownNumberEl = document.getElementById('countdown-number'); const repeatCountdownFrom = (n, waitTimeout) => { countdownFrom(n, () => setTimeout(() => repeatCountdownFrom(n, waitTimeout) , waitTimeout) ) } const countdownFrom = (n, callbackWhenDone) => { if(n >= 0) { setTimeout(() => { countdownNumberEl.textContent = n; countdownFrom(n - 1, callbackWhenDone); }, 1000); } else { callbackWhenDone(); } } repeatCountdownFrom(10, 3000); <div id="countdown-number"></div>