jQuery document.ready vs auto-chamada função anônima

137

Qual é a diferença entre esses dois.

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

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

Essas duas funções são chamadas ao mesmo tempo? Eu sei, document.ready será acionado quando a página HTML inteira for renderizada pelo navegador, mas e a segunda função (função anônima chamada automaticamente). Ele espera que o navegador conclua a renderização da página ou é chamado sempre que é encontrado?

javascript jquery Ashit Vora
fonte
18
Para o que vale a pena, $(function() {});é equivalente a$(document).ready(function() {});
Ian Henry
1
A função anônima de chamada automática será executada sempre que for encontrada. Além disso, a renderização do documento na tela e a criação do modelo de objeto na memória não são relacionadas.
Anurag
related: Por que definir função anônima e passá-la jQuery como argumento? sobre qual padrão para usar com backbone
Bergi
4
Você realmente deve aceitar respostas para suas perguntas quando elas responderem efetivamente. Você tem uma taxa de aceitação muito baixa.
leigero 31/07
A maneira não-jQuery de executar a primeira é: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Respostas:

112

  • $(document).ready(function(){ ... }); ou curto $(function(){...});

    Essa função é chamada quando, o DOM is readyque significa, você pode começar a consultar elementos, por exemplo. .ready()usará maneiras diferentes em navegadores diferentes para garantir que o DOM esteja realmente pronto.

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

    Isso nada mais é do que uma função que se chama o mais rápido possível quando o navegador está interpretando o seu ecma-/javascript. Portanto, é muito improvável que você possa agir com sucesso DOM elementsaqui.

jAndy
fonte
1
@NimChimpsky Confuso (function () {}); com $ (function () {}). Você é o oposto do errado;)
ALH
Estou confuso, com relação a (function(){ ... })();nenhum código JS é executado o mais rápido possível? Se você dissesse, alert()dentro ou fora do SIAF, o efeito não seria o mesmo?
Skube
2
@skube Sim, qualquer código JS será executado assim que o analisador o ler, mas sua confusão pode estar surgindo se existe um "$" na frente do SIAF ou não. Nesse caso, e este site está usando jQuery, esta é a forma abreviada da função auxiliar jQuery document.ready, que agendará a função fornecida para execução assim que o DOM estiver disponível. A função auxiliar em si será executada assim que for lida, mas a função fornecida não será.
Neil Monroe
46

(function(){...})(); será executado assim que for encontrado no Javascript.

$(document).ready()será executado assim que o documento for carregado. $(function(){...});é um atalho para $(document).ready()e faz exatamente a mesma coisa.

Michal
fonte
25

  1. $(document).ready(function() { ... });simplesmente vincula essa função ao readyevento do documento; portanto, como você disse, quando o documento é carregado, o evento é acionado.

  2. (function($) { ... })(jQuery);é na verdade uma construção de Javascript, e tudo o que esse código faz é passar o jQueryobjeto function($)como parâmetro e executar a função; portanto, dentro dessa função, $sempre se refere ao jQueryobjeto. Isso pode ajudar a resolver conflitos de espaço para nome, etc.

Portanto, o nº 1 é executado quando o documento é carregado, enquanto o nº 2 é executado imediatamente, com o jQueryobjeto nomeado $como atalho.

Alan Christopher Thomas
fonte
25

O código a seguir será executado quando o DOM (modelo de objeto do documento) estiver pronto para a execução do código JavaScript.

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

A mão curta para o código acima é:

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

O código mostrado abaixo é uma função JavaScript anônima auto-invocável e será executado assim que o navegador a interpretar:

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

A função auto-invocadora do jQuery mostrada abaixo, transmite o objeto jQuery global como argumento para function($). Isso permite $que seja usado localmente dentro da função de auto-chamada sem precisar percorrer o escopo global de uma definição. O jQuery não é a única biblioteca que faz uso $, portanto isso reduz potenciais conflitos de nomes.

(function($){
  //some code
})(jQuery);
JSON C11
fonte
2
Explicação muito simples, clara e concisa dos fechamentos de javascript.
CÓDIGO
16

document.ready executado após o DOM ser "construído". As funções de auto-chamada são executadas instantaneamente - se inseridas <head>antes da construção do DOM.

srigi
fonte
6
+1 para combater um voto negativo desnecessário. No entanto, há um pequeno problema na sua resposta. A função de auto-chamada é executada onde quer que seja encontrada ao analisar e não precisa necessariamente estar dentro da <head>, e as regras não são diferentes após a construção do DOM inicial.
Anurag