.innerHTML - jak przechwycić zakończenie renderowania elementu.

0

Witam
Nie wiem czy dobrze to ująłem.
Sytuacja :
Składam sobie łańcuch który stanie się treścią html - powiedzmy ze jest dość duży (jakieś tabelki itp.).
Wlewam zawartość tego łańcucha w jakiś określony element poprzez innerHTML.
I spoko - działa. Ale chciał bym przechwycić moment kiedy faktycznie ten element zostanie wypełniony i wy-renderowany.
Teraz jest tak że :

var zmienna="bardzo dużo html+txt";
console.log('start');
cos_tam.innerHTML=zmienna;
console.log('meta');

i w konsoli zobaczę komunikaty start i meta a treść się będzie jeszcze renderowała.
Więc zasadniczo nie wiem czy już skończył czy nie :/
Jak przechwycić fakt zakończenia operacji na innerHTML ?

2

Wiesz jak działa eventloop w JavaScript?
Otóż w tak dużym uproszczeniu to kolejka zadań. Taka pętla, która co chwile sprawdza, czy już jest czas aby wykonać odpowiednie zadanie.
W JS po tasku wykonywany jest rendering.

Dodawanie wartości do innerhtml następuje natychmiastowo. Kwestia tylko właśnie wyrenderowania wyników.
Aby wykonać skrypt po wyrenderowaniu, po prostu spraw, aby wykonał się w nastepnym okrążeniu pętli (eventloop)

setTimeout(function() { console.log('meta'); }, 1);

Jeśli to cię nie usatysfakcjonuje to zastosuj DOMSubtreeModified
https://jsfiddle.net/s05fL314/

2

Z tego co wiem to nie ma eventu który by za to odpowiadał, ale jak wyżej wspomniał @MasterOf, można skorzystać z tego jak to pod spodem działa, tutaj przykłady jak tego wygodnie użyć:

https://codepen.io/caderek/pen/yLBVLVj?editors=1011
https://codepen.io/caderek/pen/qBWqWdx?editors=1011

Czyli ogólnie opakuj swój kod w funkcję asynchroniczną (z async) i odpal await delay() tam gdzie przeglądarka zaczyna renderować:

const delay = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));

(async () => {
  const zmienna = "bardzo dużo html+txt";
  console.log('start');
  cos_tam.innerHTML = zmienna;
  await delay(); // <- tutaj
  console.log('meta');
})();

Można bez async-await i bez promisów, ale będzie niewygodne.

1

@Maciej Cąderek: Dzięki !! Twój przykład po drobnych przeróbkach zaczął spełniać moje wymagania :)

0

Witam,
pytanie może nie koniecznie z tego wątku ale mam problem. Mianowicie kupiłem ksiażke komputerświat takie wprowadzenie do robienia stron internetowych i przy wykorzystaniu document.getElementById i dalej innerHTML funkcja nie działa bo po kliknięciu w przycisk więcej nic się nie dzieje w załaczniku przesyłam kod z notepada. PS: może nie jasno się wyraziłem przycisk więcej ma rozwijać to co jest zapisane po innerHTML.

0

Okej problem rowiązany jednak genezy nie znam do tej pory. Tekst był skopiowany z wikipedii było kilka cudzysłowów i nawiasów może innerHTML rozpoczał zamknął się na którymś z cudzysłowów albo coś z tymi nawiasami było jednak wpisując swój tekst wszystko gra.

1 użytkowników online, w tym zalogowanych: 0, gości: 1