DOM öğesini diğerlerinden önce güncellemeye veya Svelte'de bekleme göstergesini göstermeye nasıl zorlayabilirim?

0

Soru

Tıklandığında Dom'da çok fazla değişikliğe neden olacak bazı onay kutularım var ve bu uygulamayı birkaç saniye donduruyor. Önce onay kutularının güncellenmesini ve/veya bir bekleme göstergesi göstermesini istiyorum. Farklı şeyler denedim ama nedense dom'da başka hiçbir şey donmadan önce güncellenmeyecek. Değişiklikler, tüm sütunları kaldırarak veya ekleyerek büyük bir tabloda yapılır ve onay kutusunu tıklattıktan sonra dom'u güncelleştirmeye yönelik diğer girişimler, tablo yeniden oluşturma işlemini tamamlayana kadar geçmediğinden, başka herhangi bir şeye göre daha yüksek önceliğe sahipmiş gibi davranır. FWIW Konsolu kullanabilirim.bir iletiyi tablo güncelleştirmeden önce ve herhangi bir nedenle tamamlandıktan sonra görüntülemek için günlüğe kaydedin.

dom svelte
2021-11-22 21:14:33
1

En iyi cevabı

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
    })
  })
}

Bu await tick() uygular messageVisible DOM değişiklikleri.
Çift raf, tarayıcının güncellenmiş dom'u çizmesini bekleyecektir.

2021-11-24 12:40:02

Diğer dillerde

Bu sayfa diğer dillerde

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................