jQuery document.ready vs self-call anonymous function

137

Jaka jest różnica między tymi dwoma.

  1. $(document).ready(function(){ ... });

  2. (function(){ ... })();

Czy obie te funkcje są wywoływane w tym samym czasie? Wiem, że document.ready zostanie uruchomiona, gdy cała strona HTML zostanie wyrenderowana przez przeglądarkę, ale co z drugą funkcją (samo wywołująca funkcja anonimowa). Czy czeka, aż przeglądarka zakończy renderowanie strony, czy jest wywoływana przy każdym napotkaniu?

javascript jquery Ashit Vora
źródło
18
Bo to, co jest warte, $(function() {});jest równoważne$(document).ready(function() {});
Ian Henry
1
Samo wywołująca się funkcja anonimowa zostanie wykonana za każdym razem, gdy zostanie napotkana. Również faktyczne renderowanie dokumentu na ekranie i tworzenie modelu obiektowego w pamięci nie jest ze sobą powiązane.
Anurag,
related: Po co definiować funkcję anonimową i przekazywać ją jako argument jQuery? na którym wzorze użyć z kręgosłupem
Bergi
4
Naprawdę powinieneś akceptować odpowiedzi na swoje pytania, kiedy skutecznie na nie odpowiadają. Masz bardzo niski wskaźnik akceptacji.
leigero
Sposób wykonania pierwszej metody inny niż jQuery to: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Odpowiedzi:

112

  • $(document).ready(function(){ ... }); lub krótkie $(function(){...});

    Ta funkcja jest wywoływana, gdy DOM is readyoznacza to, że możesz na przykład rozpocząć zapytanie o elementy. .ready()użyje różnych sposobów w różnych przeglądarkach, aby upewnić się, że DOM naprawdę JEST gotowy.

  • (function(){ ... })();

    To nic innego jak funkcja, która uruchamia się tak szybko, jak to możliwe, gdy przeglądarka interpretuje Twój ecma-/javascript. Dlatego jest bardzo mało prawdopodobne, abyś mógł tu z powodzeniem działać DOM elements.

jAndy
źródło
1
@NimChimpsky I confused (function () {}); z $ (funkcja () {}). Jesteś przeciwieństwem złego;)
ALH
Jestem zdezorientowany, jeśli chodzi o to, (function(){ ... })();czy żaden kod JS nie jest uruchamiany tak szybko, jak to możliwe? Gdybyś powiedział, że alert()wewnątrz SIAF lub poza nim, czy efekt nie byłby taki sam?
skube
2
@skube Tak, każdy kod JS zostanie uruchomiony, gdy tylko parser go przeczyta, ale może pojawić się zamieszanie, niezależnie od tego, czy przed SIAFem znajduje się „$”, czy nie. Jeśli tak, a ta witryna korzysta z jQuery, jest to skrócona forma funkcji pomocniczej jQuery document.ready, która zaplanuje wykonanie danej funkcji, gdy DOM będzie dostępny. Sama funkcja pomocnicza zostanie uruchomiona, gdy tylko zostanie odczytana, ale funkcja, którą ją dostarczysz, nie zadziała.
Neil Monroe
46

(function(){...})(); zostanie wykonany, gdy tylko zostanie napotkany w skrypcie JavaScript.

$(document).ready()zostanie wykonany po załadowaniu dokumentu. $(function(){...});jest skrótem $(document).ready()i robi dokładnie to samo.

Michał
źródło
25

  1. $(document).ready(function() { ... });po prostu wiąże tę funkcję ze readyzdarzeniem w dokumencie, więc, jak powiedziałeś, po załadowaniu dokumentu zdarzenie jest wyzwalane.

  2. (function($) { ... })(jQuery);jest w rzeczywistości konstrukcją JavaScript, a wszystko, co robi ten fragment kodu, to przekazuje jQueryobiekt function($)jako parametr i uruchamia funkcję, więc wewnątrz tej funkcji $zawsze odwołuje się do jQueryobiektu. Może to pomóc w rozwiązaniu konfliktów przestrzeni nazw itp.

Więc # 1 jest wykonywany po załadowaniu dokumentu, podczas gdy # 2 jest uruchamiany natychmiast, z jQueryobiektem nazwanym $skrótowo.

Alan Christopher Thomas
źródło
25

Poniższy kod zostanie wykonany, gdy DOM (model obiektowy dokumentu) będzie gotowy do wykonania kodu JavaScript.

$(document).ready(function(){
  // Write code here
});

Krótka ręka dla powyższego kodu to:

$(function(){
  // write code here
});

Kod pokazany poniżej jest samo-wywołującą się anonimową funkcją JavaScript i zostanie wykonany, gdy tylko przeglądarka go zinterpretuje:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

Przedstawiona poniżej funkcja samo-wywołująca jQuery przekazuje globalny obiekt jQuery jako argument do function($). Pozwala to $na użycie lokalnie w ramach samowywołującej się funkcji bez konieczności przechodzenia przez globalny zasięg w celu znalezienia definicji. jQuery nie jest jedyną biblioteką, z której korzysta $, więc zmniejsza to potencjalne konflikty nazw.

(function($){
  //some code
})(jQuery);
JSON C11
źródło
2
Bardzo proste, jasne i zwięzłe wyjaśnienie zamykania javascript.
KOD
16

document.ready działa po „skonstruowaniu” DOM. Funkcje auto-wywołujące się działają natychmiastowo - jeśli zostaną wstawione do <head>, przed zbudowaniem DOM.

srigi
źródło
6
+1, aby odrzucić niepotrzebny głos przeciw. W Twojej odpowiedzi jest jednak pewien problem. Funkcja samo-wywołująca będzie wykonywana wszędzie tam, gdzie zostanie znaleziona podczas analizowania i niekoniecznie musi znajdować się wewnątrz elementu <head>, a reguły nie różnią się po skonstruowaniu początkowego DOM.
Anurag,