Jak zamrozić repliki przeglądarki podczas zmiany widoczności elementów?

Question

Jestem zdecydowanie bez programisty JS (właściwie prawie nie programistą :) ale chciałem spróbować napisać mały skrypt Greasemonkey, aby ukryć kilka elementów na określonej stronie. Kiedy zacząłem go wycinać, zdecydowałem się użyć jQuery, aby to ułatwić. Wszystko poszło dobrze, skrypt działa, ale teraz, kiedy jest gotowy, zacząłem zastanawiać się nad szczegółami.

W ramach skryptu muszę znaleźć określony element i ukryć go, wraz z poprzednim i kolejnym rodzeństwem. Ja nie zakończyła się, że czytelne, ale linia pracy:

$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w); 

Moja obawa o to, że jestem usunięcie trzech oddzielnych div w trzech oddzielnych etapach. Spowoduje to, że przeglądarka "odświeży" stronę trzy razy, prawda? To nie jest problem z trzema divami, to prawdopodobnie zaczyna mieć znaczenie, gdy jest więcej elementów. Moje pytanie brzmi: czy istnieje sposób, aby powiedzieć przeglądarce "przestań odświeżać/przerysować stronę"? Jeśli tak, mogę go użyć, ukryć dowolną liczbę elementów, a następnie poprosić przeglądarkę o aktualizację ekranu.

Answer 1

Wykonanie Javascript blokuje przeglądarkę, a nie zobaczysz odświeżenia, dopóki wykonanie kodu nie zostanie zakończone. Naprawdę nie masz się czym martwić.

Zamieściłem to dobry przykład na jsbin.com: http://jsbin.com/ecuku/edit

Aktualizacja: Często zaleca się modyfikowania węzłów poza DOM ponieważ modyfikowania DOM powoduje zmiany układu (nie repaints). Zmiany są dokonywane, gdy przeglądarka musi ponownie obliczyć pozycje i rozmiary elementów na stronie, ponieważ coś się zmieniło. Chociaż wykonywanie skryptów javascript może powodować wielokrotne przepływy, spowoduje tylko jedno przemalowanie (po zakończeniu kodu). Te zmiany mogą być dużym hitem wydajnościowym, ale w przypadku niewielkiej liczby zmian DOM (np. Twój kod ma tylko 3) prawdopodobnie nie warto pracować nad zmianami poza stroną. Również klonowanie węzła i modyfikowanie go poza stroną przed wstawieniem go może mieć nieoczekiwane konsekwencje. Na przykład, jeśli załączono obsługę zdarzeń, trzeba je ponownie dołączyć do nowych węzłów.

Answer 2

Można użyć cloneNode. Po klonowaniu można wykonać wszystkie manipulacje klonem i zastąpić oryginalny węzeł. Zapobiegnie to migotaniu treści podczas wyświetlania: brak podobny do J-P.