Tengo algunas casillas de verificación que cuando se hace clic le causa un montón de cambios en el DOM, y esta se congela la aplicación durante varios segundos. Me gustaría que las casillas de verificación actualizar en primer lugar, y/o mostrar un indicador de espera. He intentado varias cosas pero por alguna razón nada más en el DOM actualizará antes de la congelación. Los cambios realizados a una gran mesa, ya sea quitando o añadiendo todas las columnas, y actúa como si este tiene prioridad sobre cualquier otra cosa, porque cualquier otro intento de actualizar el DOM después de hacer clic en la casilla de verificación no ir a través de hasta que la tabla se ha completado la nueva representación. FWIW puedo usar la consola.registro para mostrar un mensaje antes de las actualizaciones de la tabla, y también después de que se completa por alguna razón.
0
import {tick} from "svelte";
let checked = false;
$: applyChanges(checked);
async function applyChanges() {
messageVisible = true
await tick()
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// do the stuff that causes a lots of dom updates
})
})
}
El await tick() se aplica la messageVisible cambios en el DOM.
El doble de la raf se espera para el navegador para dibujar el DOM actualizado.