У меня есть несколько флажков, которые при нажатии вызовут множество изменений в DOM, и это замораживает приложение на несколько секунд. Я бы хотел, чтобы флажки сначала обновились и/или отображали индикатор ожидания. Я пробовал разные вещи, но по какой-то причине больше ничего в DOM не будет обновляться до замораживания. Изменения вносятся в большую таблицу, либо удаляя, либо добавляя целые столбцы, и это действует так, как будто это имеет более высокий приоритет по сравнению с чем-либо другим, потому что любые другие попытки обновить DOM после нажатия флажка не выполняются до тех пор, пока таблица не завершит повторную визуализацию. ФУ, я могу использовать консоль.войдите, чтобы отобразить сообщение до обновления таблицы, а также после ее завершения по какой-либо причине.
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
})
})
}
То await tick() применяет messageVisible изменения в DOM.
Двойной raf будет ждать, пока браузер нарисует обновленный DOM.