0
180
ViewsJavascript / HTML muestra alerta antes de que el valor cambie en el navegador
Tengo una página web de contador simple que tiene un botón "+1" y una pantalla de conteo. Cuando hace clic en el botón, los recuentos en la página web aumentan en 1. Cuando los recuentos llegan a 5, se supone que la página muestra una alerta y restablece el contador a 0.
Sin embargo, cuando el contador llega a 5, la página web todavía muestra "Recuentos: 4" y aparece la alerta. Además, el texto interno de la etiqueta ya se ha convertido en "Recuentos: 5". Entonces, ¿por qué hay una inconsistencia entre el HTML y la página web real? ¿Tiene algo que ver con las operaciones asincrónicas?
Podría agregar setTimeout(function(){alert("Counter value: "+ totalCount)},1000); retrasar la alerta. Pero esa no es mi intención original. La alerta siempre debe aparecer justo después de que el contador llegue a 5 y se muestre como "Recuentos: 5".
let totalCount = 0; function onload() { document.getElementById("increment").addEventListener("click", onClick); renderCounter(); } function onClick() { totalCount++; renderCounter(); if (totalCount > 4) { alert("Counter value: " + totalCount); totalCount = 0; renderCounter(); } } function renderCounter() { let counts = document.getElementById("counter"); counts.innerText = "Counts: " + totalCount; } <body onload="onload()"> <header id="header"> <h1>Interesting tests</h1> </header> <section class="my-counter"> <p id="counter"></p> </section> <section id="increment-button"> <button type="button" id="increment"> +1 </button> </section> <script src="increment.js"></script>1 answers
Answer question0
SÍ necesita el setTimeout, pero no tiene que ser 1 segundo
- No reiniciar antes de renderizar
- la alerta se está bloqueando, por lo que la interfaz no tiene la oportunidad de actualizarse
- Permitir el renderizado, luego alertar, luego renderizar de nuevo
- Use eventListener en lugar de controladores de eventos en línea
let totalCount = 0; window.addEventListener("load", function() { document.getElementById("increment").addEventListener("click", onClick); renderCounter(); }) function onClick() { totalCount++; renderCounter(); if (totalCount > 4) { totalCount = 0; setTimeout(function() { alert("Counter value: " + totalCount); renderCounter(); }, 10); // allow the interface to update } } function renderCounter() { let counts = document.getElementById("counter"); counts.innerText = "Counts: " + totalCount; } <header id="header"> <h1>Interesting tests</h1> </header> <section class="my-counter"> <p id="counter"></p> </section> <section id="increment-button"> <button type="button" id="increment"> +1 </button> </section> <script src="increment.js"></script>