DoEvents en JavaScript

Question

Tengo el siguiente:

$('body, a').addClass('cursor-wait'); 
for (var I=0, L = myArray.length; I < L; I++) { 
    // tight loop here 
} 
$('body, a').removeClass('cursor-wait'); 

pero no estoy seguro de que el cursor: esperar icono aparece inmediatamente.

P: ¿Hay alguna manera de decir "DoEvents" en JavaScript, de modo que sé que el DOM se está actualizando antes de entrar en el ciclo?

Quizás usando el método setTimeout.

Answer 1

Esto es lo que está sucediendo:

La instancia del navegador manejando su página es de un solo subproceso. El cambio al DOM ocurre de inmediato. Sin embargo, mientras se ejecuta su secuencia de comandos, el navegador está bloqueado y no puede ejecutar su administrador de diseño, que actualiza la página de acuerdo con las clases de CSS han cambiado. Tiene razón en que setTimeout es la mejor manera de ceder el control al administrador de disposición y ver sus cambios en la pantalla. Ni siquiera necesita establecer un retraso, el simple hecho de llamar a setTimeout le permite al administrador de diseño la posibilidad de volver a dibujar la página.

$('body, a').addClass('cursor-wait'); 
setTimeout(function() { 
    for (var I=0, L = myArray.length; I < L; I++) { 
     // tight loop here 
    } 
    $('body, a').removeClass('cursor-wait'); 
}); 

Answer 2

No es necesario, addClass cambia el DOM directamente así que cuando su bucle for ejecuta cursor-wait ha sido agregado.

¿Por qué está agregando cursor-wait a la etiqueta body y todas las etiquetas?

Answer 3

he encontrado otra solución: Actualizar DOM suficiente para desplazarse a la página de 1 pixel con window.scrollBy(0, 1);