aquí hay un elemento html p. Cuando se hace clic:
red que yellowrefresh-start Esto se hace en el controlador de onClickRefresh .
Sin embargo, los cambios se reflejan solo después de que se llama al timer , finaliza su operación y regresa. el temporizador espera 5 segundos (5000ms).
Esperaría ver los cambios inmediatamente, antes de que se llame el temporizador. eso es:
esto no está ocurriendo. ¿Cómo tiene sentido?
function onClickRefresh(el){ //jquery selector let id = "#" + el.id; //read class const co = (id)=>{ return $(id).attr("class")} //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color","red"); timer(5000); $(id).css("background-color","yellow"); } function timer(ms){ const d1 = new Date(); let cont = true; while (cont){ let d2 = new Date(); cont = (d2-d1 >= ms ? false : true); } } @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} } .refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; } .refresh-end{ animation-play-state: paused; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>Su función timer es síncrona, bloquea el siguiente código hasta que se ejecuta por completo. prueba el temporizador asíncrono
async function onClickRefresh(el) { //jquery selector let id = "#" + el.id; //read class const co = (id) => { return $(id).attr("class"); }; //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color", "red"); await timer(5000); $(id).css("background-color", "yellow"); } async function timer(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} } .refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; } .refresh-end{ animation-play-state: paused; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>Intenta usar setTimeout
setTimeout( () => { $(id).css("background-color","yellow"); }, 5000 );Este código llama a una función después de 5000 milisegundos, que cambia el color de fondo a amarillo. El resto de su código se ejecuta inmediatamente.
function onClickRefresh(el){ //jquery selector let id = "#" + el.id; //read class const co = (id)=>{ return $(id).attr("class")} //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color","red"); setTimeout( () => { $(id).css("background-color","yellow"); }, 5000 ); } @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} } .refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; } .refresh-end{ animation-play-state: paused; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>TL;DR: Use setTimeout() :
//remove the "`timer(5000);`" line and the timer function. setTimeout(() => { $(id).css("background-color","yellow"); }, 5000)Su problema está en la función de temporizador. HTML/JavaScript/CSS son de un solo subproceso. Significa que si haces algo en un bucle infinito, todo se detendrá. Tenía una especie de bucle infinito en su función de temporizador, aunque terminó al final en 5 segundos, pero mientras tanto, todo estaba 'retrasado' y la animación CSS no podía comenzar. Por esta razón, debe usar esta sintaxis:
setTimeout(() => { //code... }, 5000 /*delay in milliseconds*/)