Tengo una casilla de verificación con un evento de cambio. Cuando hay muchos datos, el clic en la casilla de verificación realiza una tarea en segundo plano que puede llevar algún tiempo.
Así que lo primero que hago es:
$chxSelectAll.on('change', function (e) { $('.loadingnew').show() ... Long running code here }El problema es: la rueda giratoria en espera solo se muestra cuando el evento de cambio completó el código. El código funciona fuera o desde consola sin problema. ¿Cómo puedo forzar el show () antes de que se ejecute el código?
Saludos
La rueda giratoria en espera solo se muestra cuando el evento de cambio completó el código.
Eso significa que la tarea de ejecución prolongada no está en segundo plano, sino en primer plano, vinculando (bloqueando) el hilo que comparten el código JavaScript y el código de visualización de la página.
Tienes dos opciones:
Si es posible, descargue la tarea de ejecución prolongada en un subproceso de trabajo web , de modo que no se ejecute en el subproceso principal de la interfaz de usuario y bloquee las actualizaciones de la página.
Si eso no es posible, retrase el inicio del código de bloqueo durante aproximadamente 60 ms usando setTimeout , de modo que el navegador tenga la oportunidad de mostrar la rueda giratoria de "carga" antes de que el código detenga el hilo. Tenga en cuenta que es posible que la rueda giratoria no gire realmente, pero al menos será visible.
Aquí hay un ejemplo de #2:
$chxSelectAll.on('change', function (e) { $('.loadingnew').show() setTimeout(() => { ... Long running code here }, 60); });