Jak zjistím, kdy byly dokončeny změny v jquery html()?

Používám jQuery ke změně HTML značky a nový HTML může být velmi dlouhý řetězec.

$("#divToChange").html(newHTML);

Poté chci vybrat prvky vytvořené v novém HTML, ale pokud vložím kód bezprostředně za výše uvedený řádek, zdá se, že vytváří podmínku sporu s dlouhým řetězcem, kde změny, které html() provádí, nemusí nutně být dokončeno vykreslování. V takovém případě nebude pokus o výběr nových prvků vždy fungovat.

Chci vědět, zda došlo k vyvolání události nebo nějakému jinému způsobu upozornění, když byly změny v html() dokončeny? Narazil jsem na plugin jQuery watch, který funguje dobře jako řešení, ale není to ideální. Existuje lepší způsob?

Odpověď

Jak již komentátor zmínil, JavaScript je jednovláknový, takže nemůžete získat podmínky závodu.

Co vás však může vyvést z míry, je skutečnost, že uživatelské rozhraní se nebude aktualizovat na základě JavaScriptu, dokud nebude vlákno dokončeno. To znamená, že po zavolání html(...) musí skončit celá metoda, včetně veškerého kódu , než prohlížeč vykreslí obsah.

Pokud váš kód po zavolání html(...) spoléhá na to, že se před pokračováním přepočítá rozvržení stránky, můžete udělat něco takového:

$("#divToChange").html(newHTML);
setTimeout(function() {
    // Insert code to be executed AFTER
    // the page renders the markup
    // added using html(...) here
}, 1);

Pomocí setTimeout(...) s časem 1 v JavaScriptu odloží provedení, dokud neskončí aktuální kód JavaScript ve volající funkci a prohlížeč neaktualizuje uživatelské rozhraní. To může vyřešit váš problém, i když je těžké to určit, pokud neposkytnete reprodukovatelný příklad chyby, ke které dochází.