jQuery - vários $ (document) .ready ...?

359

Questão:

Se eu vincular dois arquivos JavaScript, ambos com $(document).readyfunções, o que acontece? Um substitui o outro? Ou os dois $(document).readysão chamados?

Por exemplo,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});


Tenho certeza de que é uma prática recomendada simplesmente combinar as duas chamadas em uma única, $(document).readymas isso não é possível na minha situação.

javascript jquery rlb.usa
fonte
Possível duplicata de Você pode ter vários $ (document) .ready (function () {...}); Seções?
JohnOsborne

Respostas:

351

Tudo será executado e com base na primeira chamada e na primeira execução!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo Como você pode ver, eles não se substituem

Também uma coisa que eu gostaria de mencionar

no lugar disso

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

você pode usar esse atalho

jQuery(function(){
   //dom ready codes
});
Praveen Prasad
fonte
66
ou ainda mais curto $ (function () {// dom ready codes}); Você
usar o seguinte
217
Lembre-se de ver $ (function () {// do stuff}); pela primeira vez, e quão difícil foi para o Google a explicação? $ (document) .ready comunica muito mais por tão pouco ...
Matt Montag
56
Uma votação para um código conciso e menos legível é uma votação para o terrorismo.
FreeAsInBeer
10
Os atalhos não oferecem benefícios, mas causam ofuscação. Se seu objetivo é tornar seu código "mais curto" em termos de tempo necessário para ler, entender e manter, esses atalhos levarão você a um longo caminho.
jononomo
3
se estiver usando atalhos é mau, deve-se usarjQuery(document).ready(function(){ });
Memet Olsen
76

É importante observar que cada jQuery()chamada deve realmente retornar. Se uma exceção for lançada em uma, as chamadas subsequentes (não relacionadas) nunca serão executadas.

Isso se aplica independentemente da sintaxe. Você pode usar jQuery(), jQuery(function() {}), $(document).ready(), o que quiser, o comportamento é o mesmo. Se um dos primeiros falhar, os blocos subsequentes nunca serão executados.

Isso foi um problema para mim ao usar bibliotecas de terceiros. Uma biblioteca estava lançando uma exceção e as bibliotecas subsequentes nunca inicializaram nada.

cjastram
fonte
2
Este. Acabei de passar uma boa hora restringindo um problema até este ponto. Uma das minhas $(document).readychamadas gerou um erro e, portanto, uma $(document).readyfunção diferente nunca foi chamada. Isso estava me deixando louco.
scrollup
10
Este não é mais o caso. A partir do jQuery 3.0, o jQuery garante que uma exceção que ocorra em um manipulador não impeça a execução de manipuladores adicionados posteriormente. api.jquery.com/ready
Ravi Teja
32

$ (documento) .ready (); é o mesmo que qualquer outra função. ele é acionado quando o documento está pronto - ou seja, carregado. a questão é sobre o que acontece quando vários $ (document) .ready () são acionados, e não quando você dispara a mesma função dentro de vários $ (document) .ready () 

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

ambos se comportarão exatamente da mesma maneira. a única diferença é que, embora o primeiro atinja os mesmos resultados. o último rodará uma fração de segundo mais rápido e requer menos digitação. :)

em conclusão, sempre que possível, use apenas 1 $ (document) .ready ();

// resposta antiga

Ambos serão chamados em ordem. A melhor prática seria combiná-los. mas não se preocupe se não for possível. a página não explodirá.

Ed Fryed
fonte
^ ^ editei o meu como eu pensava que as pessoas poderiam ficar confusas entre executar a mesma função várias vezes e executar funções diferentes em vários $ (document) .ready's. ^^ espero que ajude.
Ed Fryed
21

A execução é descendente. Primeiro a chegar, primeiro a ser servido.

Se a sequência de execução for importante, combine-as.

Diodous - James MacFarlane
fonte
9

Ambos serão chamados, primeiro a chegar, primeiro a ser servido. Dê uma olhada aqui .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Resultado:

Documento pronto 2 foi chamado!

Scoobler
fonte
2

Não é necessário necro um thread, mas a versão mais recente da jQuerysintaxe sugerida é:

$( handler )

Usando uma função anônima, isso pareceria

$(function() { ... insert code here ... });

Veja este link:

https://api.jquery.com/ready/

Arlo Guthrie
fonte