Wypalanie zdarzenia javascript na każdej zmianie DOM "zakończone"

Question

Wiem, że można to w jakiś sposób poradzić, ale od tej chwili jest to naprawdę trudne. Piszę scenariusz i chcę uruchomić kilka konkretnych funkcji po zakończeniu manipulacji DOM. Nie mogę modyfikować/dodawać/usuwać żadnego innego skryptu (ponieważ może zostać wstrzyknięty na stronę za pomocą jakiegoś frameworka). Strona korzysta z zapytań ajaxowych (nie zaimplementowanych w jQuery), aby załadować/zmodyfikować zawartość. Teraz chcę, aby zdarzenie zostało wywołane po zakończeniu każdej modyfikacji DOM. Moje obecne podejście polega na uruchomieniu funkcji w każdym zdarzeniu DOMSubtreeModified. Coś takiego

$(document).bind('DOMSubtreeModified', doSomeStuff); 

Jednak wadą tego podejścia jest to, powiedzmy Ajax ładunki 10 elementów w rozmowy, to dla każdego elementu doSomeStuff jest zwolniony. Czy można to ograniczyć do strzelania tylko po załadowaniu 10 elementu? Coś jak resetowanie zdarzenia $ (document) .ready()? więc $ (document) .ready() jest uruchamiany za każdym razem, gdy DOM jest gotowy (po załadowaniu zawartości ajax)

Answer 1

W jQuery znajduje się metoda ajaxComplete, która wywołuje daną funkcję po każdym zakończonym wywołaniu AJAX. Zobacz więcej here.

Proponuję użyć jQuery lub (w przypadku, gdy nie jest to opcja) przeanalizuj kod źródłowy tej funkcji, aby zobaczyć, jak się to odbywa.

Answer 2

Za pomocą obserwatora obrażeń można słuchać zmian, a jeśli zdarzenie jest uruchamiane, dokument został zmieniony.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 

var observer = new MutationObserver(function(mutations, observer) { 
    // Add the actions to be done here if a changes on DOM happened 
    console.log(mutations, observer); 

}); 

// Register the element root you want to look for changes 
observer.observe(document, { 
    subtree: true, 
    attributes: true 
}); 

Answer 3

Wiem, że trochę późno do partii, ale to brzmi jak może chcesz ZWLOKA swoją funkcję doSomeStuff. Jeśli nie jesteś przeciwny wprowadzeniu zależności od pliku Underscore.js, ma on dobrą funkcję debounce.