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

137

Qual é a diferença entre esses dois.

$(document).ready(function(){ ... });
(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

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

$(document).ready(function() { ... });simplesmente vincula essa função ao readyevento do documento; portanto, como você disse, quando o documento é carregado, o evento é acionado.
(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