J'ai des cases à cocher qui lorsqu'il est cliqué va causer beaucoup de changements dans les DOM, et cela se fige à l'application pendant plusieurs secondes. J'aimerais que les cases à cocher mettre à jour en premier, et/ou d'affichage d'un indicateur d'attente. J'ai essayé différentes choses mais pour une raison que rien d'autre dans le DOM sera mise à jour avant de les congeler. Les modifications sont apportées à une grande table, soit en enlevant ou en ajoutant des colonnes entières, et il agit comme s'il a une plus grande priorité sur toute autre chose, parce que toutes les autres tentatives pour mettre à jour le DOM après avoir cliqué sur la case à cocher ne pas aller jusqu'à ce que la table a terminé re-rendu. FWIW, je peux utiliser la console.le journal pour afficher un message avant la table des mises à jour, et aussi quand il se termine pour une raison quelconque.
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
})
})
}
L' await tick() s'applique la messageVisible changements pour les DOM.
Le double de la raf va attendre que le navigateur de tirer la mise à jour du DOM.