0
337
VisualizaçõesTemporizador: setTimeout y llamada de función
function tick() { seconds_lapsed++; // Break point. } function countdown() { while(!stopped || !is_paused()){ setTimeout(tick, 1000); // 1 second. show_counter(); } }¿Podría decirme por qué el intérprete no se detiene en el punto de interrupción? El bucle while funciona, echa un vistazo a la captura de pantalla.
2 Respostas
Responde à pergunta0
El ciclo while es un ciclo "ocupado", es decir, mantiene ocupado el motor de JavaScript, por lo que no procesará nada que esté esperando en una de sus colas de eventos/trabajos. Esto significa que la interfaz de usuario no se actualiza, no se puede procesar ninguna entrada y los eventos producidos por setTimeout no se consumen. En este ejemplo, tick solo se puede ejecutar si el código que se está ejecutando actualmente finaliza . Entonces el ciclo while debe terminar primero.
Deberías dejar que tick se ejecute, y solo entonces verificar la condición:
var stopped = true; var seconds_lapsed = 0; document.querySelector("button").addEventListener("click", function() { stopped = !stopped; seconds_lapsed = 0; this.textContent = stopped ? "Start" : "Stop"; if (!stopped) countdown(); }); function show_counter() { document.querySelector("span").textContent = seconds_lapsed; } function is_paused() { return document.querySelector("input").checked; } function tick() { seconds_lapsed++; } function countdown() { show_counter(); setTimeout(function () { if (stopped) return; // stop the loop if (!is_paused()) tick(); countdown(); // <--- this is the "loop" }, 1000); } Seconds elapsed: <span>0</span><br> <input type="checkbox">Paused<br> <button>Start</button>0
el siguiente ejemplo podría ayudarlo a lograr lo que está buscando. Distinguir entre setInterval() y setTimeout()
Básicamente, los documentos dicen:
setTimeout ejecuta una función o un fragmento de código específico una vez que expira el temporizador.
setInterval llama repetidamente a una función o ejecuta un fragmento de código, con un retraso de tiempo fijo entre cada llamada.
Entonces, si usa setInterval, no necesita un ciclo while adentro porque ya se llama "repetidamente"
var counter = $('#counter'); var stopped = false; var seconds_lapsed=0; var myInterval; function tick() { if(stopped) { clearInterval(myInterval); show_counter('FINISHED'); return; } show_counter(seconds_lapsed++); } function show_counter(message){ counter.html(message); } function countdown() { myInterval = setInterval(tick, 1000); } function endCountdown(timeout) { let timeoutId = setTimeout(function(){ stopped = true; clearTimeout(timeoutId) }, timeout); } countdown(); // start the countdown endCountdown(5000); // ends the countdown after 5000 ms => 5sec <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter">counter</div>