jQuery document.ready vs funzione anonima auto chiamata

137

Qual è la differenza tra questi due.

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

Queste due funzioni vengono chiamate contemporaneamente? Lo so, document.ready verrà attivato quando l'intera pagina HTML viene renderizzata dal browser, ma per quanto riguarda la seconda funzione (funzione anonima che si chiama da sola). Aspetta che il browser completi il rendering della pagina o viene chiamato ogni volta che viene rilevato?

javascript jquery

— Ashit Vora
fonte

18

Per quello che vale, $(function() {});equivale a$(document).ready(function() {});

— Ian Henry,

1

La funzione anonima chiamata verrà eseguita ogni volta che viene rilevata. Inoltre, il rendering del documento sullo schermo e la creazione del modello a oggetti in memoria non sono correlati.

— Anurag,

correlate: Perché definire la funzione anonima e passarla a jQuery come argomento? su quale modello usare con la spina dorsale

— Bergi,

4

Dovresti davvero accettare le risposte alle tue domande quando rispondono efficacemente. Hai un tasso di accettazione molto basso.

— leigero,

Il modo non jQuery di fare il primo è: document.addEventListener ('domContentLoaded', function () {...});

— Evan Thompson,

112

$(document).ready(function(){ ... }); o breve $(function(){...});

Questa funzione viene chiamata quando DOM is readyciò significa che è possibile iniziare a interrogare elementi per esempio. .ready()utilizzerà modalità diverse su browser diversi per assicurarsi che il DOM sia realmente pronto.
(function(){ ... })();

Non è altro che una funzione che si richiama al più presto quando il browser sta interpretando il tuo ecma-/javascript. Pertanto, è molto improbabile che tu possa agire con successo DOM elementsqui.

— JANDY
fonte

1

@NimChimpsky I confused (function () {}); con $ (funzione () {}). Sei l'opposto del torto;)

— ALH,

Sono confuso, per quanto riguarda il (function(){ ... })();codice JS non viene eseguito il prima possibile? Se avessi detto, alert()all'interno della SIAF o al di fuori di essa, l'effetto non sarebbe stato lo stesso?

— skube,

2

@skube Sì, qualsiasi codice JS verrà eseguito non appena il parser lo legge, ma potrebbe esserci la tua confusione se ci sono "$" davanti al SIAF o meno. In tal caso, e questo sito utilizza jQuery, questa è la forma abbreviata della funzione helper document.ready di jQuery, che pianificherà l'esecuzione della funzione data una volta disponibile il DOM. La stessa funzione di supporto verrà eseguita non appena viene letta, ma la funzione fornita non lo farà.

— Neil Monroe,

46

(function(){...})(); verrà eseguito non appena viene rilevato nel Javascript.

$(document).ready()verrà eseguito una volta caricato il documento. $(function(){...});è una scorciatoia per $(document).ready()e fa esattamente la stessa cosa.

— Michal
fonte

25

$(document).ready(function() { ... });lega semplicemente tale funzione readyall'evento del documento, quindi, come hai detto, quando il documento viene caricato, l'evento si innesca.
(function($) { ... })(jQuery);è in realtà un costrutto di Javascript e tutto ciò che fa quel pezzo di codice è passare l' jQueryoggetto function($)come parametro ed eseguire la funzione, quindi all'interno di quella funzione $si riferisce sempre jQueryall'oggetto. Questo può aiutare a risolvere i conflitti di namespace, ecc.

Quindi il numero 1 viene eseguito quando il documento viene caricato, mentre il numero 2 viene eseguito immediatamente, con l' jQueryoggetto denominato $come stenografia.

— Alan Christopher Thomas
fonte

25

Il seguente codice verrà eseguito quando il DOM (Document object model) è pronto per l'esecuzione del codice JavaScript.

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

La scorciatoia per il codice sopra è:

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

Il codice mostrato di seguito è una funzione JavaScript anonima auto-invocante e verrà eseguita non appena il browser lo interpreta:

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

La funzione auto-invocante jQuery mostrata di seguito, passa l'oggetto jQuery globale come argomento a function($). Ciò consente $di essere utilizzato localmente all'interno della funzione auto-invocante senza dover attraversare l'ambito globale per una definizione. jQuery non è l'unica libreria che utilizza $, quindi riduce i potenziali conflitti di denominazione.

(function($){
  //some code
})(jQuery);

— JSON C11
fonte

2

Spiegazione molto semplice, chiara e concisa delle chiusure javascript.

— CODICE

16

document. già eseguito dopo che "DOM" è stato costruito. Le funzioni auto-invocanti vengono eseguite all'istante - se inserite <head>, prima della creazione di DOM.

— srigi
fonte

6

+1 per contrastare un inutile downvote. Tuttavia, c'è un leggero problema nella tua risposta. La funzione auto-invocante verrà eseguita ovunque venga trovata durante l'analisi, e non deve necessariamente essere all'interno di <head>, e le regole non sono diverse dopo che il DOM iniziale è stato costruito.

— Anurag,