En el fragmento, quiero que el color del timer cambie a rojo antes de que aparezca la alert .
He escrito $("#timer").css('color', 'red'); before alert("Time Up!") , por lo que lógicamente debería cambiar el color del texto antes de mostrar la alerta, pero cambia de color después de mostrar la alerta.
let time = 3; $(function() { let interval = setInterval(function() { time--; if (time >= 0) document.getElementById("timer").innerHTML = time + ""; else { $("#timer").css('color', 'red'); clearInterval(interval); alert("Time Up!") } }, 1000); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="timer">3</h1>El problema se debe a que alert() bloquea la actualización de la interfaz de usuario y, aunque llama a css() antes de alert() , no hay suficiente tiempo para actualizar el DOM antes de que aparezca la alerta y evita temporalmente cualquier procesamiento adicional.
Para solucionar esto, coloque la llamada alert() en un tiempo de espera con un breve retraso. Esto permite que la interfaz de usuario se actualice antes de que se muestre la alert() :
let time = 3; jQuery($ => { let interval = setInterval(function() { time--; if (time >= 0) { $("#timer").html(time); } else { $("#timer").css('color', 'red'); clearInterval(interval); setTimeout(() => alert("Time Up!"), 0); } }, 1000); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="timer">3</h1>