Necessário principalmente quando preciso carregar vários arquivos js, onde cada um contém $ (document) .ready (); função
Abdillah 13/01
@leora esta pergunta foi feita em uma entrevista: D Thanks #
eirenaios
Respostas:
288
Você pode ter vários, mas nem sempre é a melhor coisa a se fazer. Tente não usá-los demais, pois isso afetará seriamente a legibilidade. Fora isso, é perfeitamente legal. Veja abaixo:
Também é importante notar que uma função definida dentro de um $(document).readybloco não pode ser chamada de outro $(document).readybloco, eu apenas executei este teste:
Não é aconselhável confiar na ordem de execução ao usar várias instruções $ (document) .ready (). Cada um precisa executar independentemente de qualquer outro que já tenha sido executado ou não.
James
@AoP - Não sei o quanto faz sentido, se não forem executadas em ordem, não terão sentido no contexto do aplicativo, portanto, usando vários $ (document) .ready (os blocos seriam quebrados por completo).
karim79
7
@ karim79 certamente isso (a pergunta do OP) é mais aplicável ao escrever um código complicado com várias preocupações de inicialização - ou seja, algum código que é sempre executado quando o carregamento é concluído e outro que é necessário apenas em alguns nós de conteúdo? Em tal situação, o contexto deve ser silenciado e a ordem de execução deve ser imaterial - poder atribuir ao evento 'DOM ready' sem substituir o anterior, torna-se um recurso útil, independentemente do comportamento do pedido.
Tehwalrus 22/04
1
Em relação a uma função definida em um bloco pronto que não pode ser chamado de outro bloco pronto - isso é verdade da maneira que você define a função, mas se você a definir como saySomething = function () {}, poderá chamá-la. Estranho, certo? jsfiddle.net/f56qsogm teste aqui.
ferr
2
Eu acho que se comporta assim porque está adicionando a função ao objeto de janela que é acessível globalmente. Caso contrário, é uma função declarativa com escopo definido localmente para essa função pronta.
ferr
19
Você pode usar vários. Mas você também pode usar várias funções dentro de um documento.
Tudo bem se você tiver controle total do código anexado à página. Se alguém já tiver escrito isso em outro arquivo anexado à página, você poderá declá-lo assim.
25411 James Wiseman
Não tenho certeza do que você está tentando dizer. Mas se você colocar isso na sua cabeça e incluir 15 outras JS externas, todas contendo um (ou vários document.load), ainda funcionará como se houvesse apenas um. Vale ressaltar que o resumo de cada função / variável termina com o colchete de fechamento da função $ (document) .ready.
Mickel
2
Apenas tentando dizer que, às vezes, outras pessoas têm módulos escritos anexados à página que já têm uma função pronta para documento, portanto você pode não ter o luxo de mover todo o seu código para uma função (o que, concedido, seria o ideal ) No entanto, eu também ficaria desconfiado de ter muitas coisas aqui, pois o On Ready Bloating, que pode tornar o código igualmente difícil de manter.
25411 James Wiseman
1
Ah, agora eu te pego. Sim, eu concordo com isso. Apenas declarou um exemplo para provar que é possível;)
Mickel
15
Sim, você pode facilmente ter vários blocos. Apenas tenha cuidado com as dependências entre eles, pois a ordem de avaliação pode não ser o que você espera.
Obrigado, é bom deixar isso claro, pois - apesar da sabedoria geral sobre o assunto - a página jQuery ready () na verdade não diz se você pode ou não (no momento da redação :)). No entanto, isso implica que está tudo bem, se você ler nas entrelinhas de uma frase:Ready handlers bound this way are executed after any bound by the other three methods above.
Reg Edit
5
Sim, é possível, mas você pode usar melhor um div #mydiv e usar os dois
Sim, está perfeitamente bem. Mas evite fazê-lo sem motivo. Por exemplo, usei-o para declarar regras globais de sites separadamente das páginas individuais quando meus arquivos javascript foram gerados dinamicamente, mas se você continuar fazendo isso repetidamente, será difícil ler.
Além disso, você não pode acessar alguns métodos de outra
jQuery(function(){});chamada, então esse é outro motivo pelo qual você não deseja fazer isso.
Com o antigo, window.onloadvocê substituirá o antigo sempre que especificar uma função.
Várias seções prontas para documentos são particularmente úteis se você tiver outros módulos acessando a mesma página que o utiliza. Com a window.onload=funcdeclaração antiga , toda vez que você especificava uma função a ser chamada, ela substituía a antiga.
Agora, todas as funções especificadas estão na fila / empilhadas (alguém pode confirmar?), Independentemente da seção de preparação do documento em que estão especificadas.
É legal, mas às vezes causa comportamento indesejado. Como exemplo, usei a biblioteca MagicSuggest e adicionei duas entradas MagicSuggest em uma página do meu projeto e usei funções prontas para documentos separadas para cada inicialização de entradas. A primeira inicialização do Input funcionou, mas não o segundo e também não deu nenhum erro; o Second Input não apareceu. Portanto, eu sempre recomendo usar uma função pronta para documento.
<html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$(document).ready(function(){
$("#hide").click(function(){
$("#test").hide();});
$("#show").click(function(){
$("#test").show();});});</script></head><body><h2>This is a test of jQuery!</h2><pid="test">This is a hidden paragraph.</p><buttonid="hide">Click me to hide</button><buttonid="show">Click me to show</button></body>
as respostas anteriores mostraram o uso de várias funções nomeadas dentro de um único bloco .ready ou de uma única função sem nome no bloco .ready, com outra função nomeada fora do bloco .ready. Encontrei essa pergunta ao pesquisar se havia uma maneira de ter várias funções não nomeadas dentro do bloco .ready - não consegui obter a sintaxe correta. Eu finalmente descobri e esperava que, ao postar meu código de teste, ajudasse outras pessoas a procurar a resposta para a mesma pergunta que eu tinha.
Você pode descrever como isso é diferente das outras respostas?
Stephen Rauch
Certifique-se: as respostas anteriores mostraram o uso de várias funções nomeadas dentro de um único bloco .ready ou de uma única função sem nome no bloco .ready, com outra função nomeada fora do bloco .ready. Encontrei essa pergunta ao pesquisar se havia uma maneira de ter várias funções sem nome dentro do bloco .ready - não consegui obter a sintaxe correta. Eu finalmente descobri e esperava que, ao postar meu código de teste, ajudasse outras pessoas a procurar a resposta para a mesma pergunta que eu tinha.
JEPrice
Desculpe, eu quis dizer na pergunta. Há um botão de edição na parte inferior esquerda da caixa de texto. Descrever por que sua solução é diferente / melhor faz com que seja uma resposta muito melhor, pois futuros leitores poderão entender mais rapidamente o "Por que". Obrigado.
Respostas:
Você pode ter vários, mas nem sempre é a melhor coisa a se fazer. Tente não usá-los demais, pois isso afetará seriamente a legibilidade. Fora isso, é perfeitamente legal. Veja abaixo:
http://www.learningjquery.com/2006/09/multiple-document-ready
Tente isto:
Você verá que é equivalente a isso, observe a ordem de execução:
Também é importante notar que uma função definida dentro de um
$(document).ready
bloco não pode ser chamada de outro$(document).ready
bloco, eu apenas executei este teste:saída foi:
fonte
Você pode usar vários. Mas você também pode usar várias funções dentro de um documento.
fonte
Sim, você pode facilmente ter vários blocos. Apenas tenha cuidado com as dependências entre eles, pois a ordem de avaliação pode não ser o que você espera.
fonte
Sim , é possível ter várias chamadas $ (document) .ready (). No entanto, acho que você não sabe de que maneira eles serão executados. (fonte)
fonte
Ready handlers bound this way are executed after any bound by the other three methods above.
Sim, é possível, mas você pode usar melhor um div #mydiv e usar os dois
fonte
Sim, está perfeitamente bem. Mas evite fazê-lo sem motivo. Por exemplo, usei-o para declarar regras globais de sites separadamente das páginas individuais quando meus arquivos javascript foram gerados dinamicamente, mas se você continuar fazendo isso repetidamente, será difícil ler.
Além disso, você não pode acessar alguns métodos de outra
jQuery(function(){});
chamada, então esse é outro motivo pelo qual você não deseja fazer isso.Com o antigo,
window.onload
você substituirá o antigo sempre que especificar uma função.fonte
Sim você pode.
Várias seções prontas para documentos são particularmente úteis se você tiver outros módulos acessando a mesma página que o utiliza. Com a
window.onload=func
declaração antiga , toda vez que você especificava uma função a ser chamada, ela substituía a antiga.Agora, todas as funções especificadas estão na fila / empilhadas (alguém pode confirmar?), Independentemente da seção de preparação do documento em que estão especificadas.
fonte
Eu acho que a melhor maneira de ir é mudar para funções nomeadas (verifique esse estouro para saber mais sobre esse assunto) . Dessa forma, você pode chamá-los de um único evento.
Igual a:
Dessa forma, você pode carregá-los em uma única função pronta.
});
Isso produzirá o seguinte para o seu console.log:
Dessa forma, você pode reutilizar as funções para outros eventos.
fonte
É legal, mas às vezes causa comportamento indesejado. Como exemplo, usei a biblioteca MagicSuggest e adicionei duas entradas MagicSuggest em uma página do meu projeto e usei funções prontas para documentos separadas para cada inicialização de entradas. A primeira inicialização do Input funcionou, mas não o segundo e também não deu nenhum erro; o Second Input não apareceu. Portanto, eu sempre recomendo usar uma função pronta para documento.
fonte
Você pode até aninhar funções prontas para documentos dentro dos arquivos html incluídos. Aqui está um exemplo usando jquery:
Arquivo: test_main.html
Arquivo: test_embed.html
Saída do console:
O navegador mostra:
test_embed.html
fonte
Você também pode fazer da seguinte maneira:
as respostas anteriores mostraram o uso de várias funções nomeadas dentro de um único bloco .ready ou de uma única função sem nome no bloco .ready, com outra função nomeada fora do bloco .ready. Encontrei essa pergunta ao pesquisar se havia uma maneira de ter várias funções não nomeadas dentro do bloco .ready - não consegui obter a sintaxe correta. Eu finalmente descobri e esperava que, ao postar meu código de teste, ajudasse outras pessoas a procurar a resposta para a mesma pergunta que eu tinha.
fonte