Ho alcune caselle di controllo che, quando cliccato farà un sacco di cambiamenti nel DOM, e questo blocca l'applicazione per diversi secondi. Mi piacerebbe che le caselle di controllo per l'aggiornamento di primo e/o visualizzare un indicatore di attesa. Ho provato diverse cose, ma per qualche motivo non c'è niente al DOM aggiornamento prima del blocco. Le modifiche vengono apportate a un grande tavolo, sia la rimozione o l'aggiunta di intere colonne, e si comporta come se questa ha la priorità su qualsiasi altra cosa, perché ogni altro tentativo di aggiornare il DOM dopo aver fatto clic sulla casella di controllo non andare fino a quando la tabella è completata re-rendering. FWIW posso usare la console.registro per visualizzare un messaggio, prima che gli aggiornamenti della tabella, e anche dopo aver completato per qualche motivo.
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
})
})
}
Il await tick() si applica la messageVisible modifiche alla DOM.
Il doppio raf attesa per il browser per attirare l'aggiornamento DOM.