Você pode ter vários $ (document) .ready (function () {…}); Seções?

240

Se eu tenho muitas funções na inicialização, todas elas precisam estar em uma única:

$(document).ready(function() {

ou posso ter várias dessas declarações?

leora
fonte
1
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:

http://www.learningjquery.com/2006/09/multiple-document-ready

Tente isto:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Você verá que é equivalente a isso, observe a ordem de execução:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

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:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

saída foi:

hello1
something
hello2
karim79
fonte
25
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.

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});
Mickel
fonte
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.

pjesi
fonte
11

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)

JW.
fonte
14
chamado na ordem adicionada
redsquare
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
3

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.

Neo
fonte
2

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=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.

James Wiseman
fonte
Sim, é verdade, as funções são colocadas na fila mais do que substituindo as funções $ (document) .ready anteriores.
Deeksy
2

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:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

Dessa forma, você pode carregá-los em uma única função pronta.

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

Isso produzirá o seguinte para o seu console.log:

first
second
third

Dessa forma, você pode reutilizar as funções para outros eventos.

jQuery(window).on('resize',function(){
    secondFunction();
});

Verifique este violino para a versão de trabalho

Jelle Verzijden
fonte
0

É 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.

Nimantha Harshana Perera
fonte
0

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

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Arquivo: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Saída do console:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

O navegador mostra:

test_embed.html

Tim
fonte
0

Você também pode fazer da seguinte maneira:

<html>
<head>
<script src="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>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="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.

JEPrice
fonte
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.
Stephen Rauch