Quiero establecer el estilo del cursor en 'esperar' mientras se ejecuta una función javascript prolongada, y luego restablecer la normalidad después.
Pensé que esto podría ser suficiente:
document.body.style.cursor = 'wait'; // long scripting here document.body.style.cursor = 'auto'; Sin embargo... si muevo el cursor para señalar (por ejemplo) una <input> entonces el cursor cambia al tipo apropiado, por ejemplo, 'texto'. (Probado a través de comandos individuales en la consola).
Encontré esta pregunta similar , que establece una regla css de
html.wait, html.wait * { cursor: wait !important; }
y lo usa a través de este js:
document.querySelector("html").classList.add("wait"); // long scripting here document.querySelector("html").classList.remove("wait");.. pero .. no parece activarse mientras se ejecuta el script.
Ponga un retraso inactivo donde JS puede liberar la CPU de nuevo al navegador para que tenga la oportunidad de volver a pintar (o como se llame).
const DELAY_FOR_REFRESH = 25; // milliseconds document.querySelector("html").classList.add("wait"); setTimeout( () => { // long scripting here document.querySelector("html").classList.remove("wait"); }, DELAY_FOR_REFRESH); En pruebas limitadas, DELAY_FOR_REFRESH necesitaba ser más de al menos 20 ms; más rápido y el comportamiento observado es que el navegador no vuelve a pintar/actualizar antes de que comience la secuencia de comandos larga.
NÓTESE BIEN. el restablecimiento del cursor a 'auto' debe ocurrir al final de la funcionalidad setTimeout() (no después).
Mi modelo mental de lo que sucede aquí es algo como esto: