Czy możesz mieć wiele $ (dokument) .ready (function () {…}); Sekcje?

Jeśli mam wiele funkcji podczas uruchamiania, czy wszystkie muszą znajdować się pod jednym:

$(document).ready(function() {

czy mogę mieć wiele takich oświadczeń?

Możesz mieć wiele, ale nie zawsze jest to najładniejsza rzecz. Staraj się ich nie nadużywać, ponieważ poważnie wpłynie to na czytelność. Poza tym jest to całkowicie legalne. Zobacz poniżej:

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

Wypróbuj to:

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

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

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

Przekonasz się, że jest to równoważne, zwróć uwagę na kolejność wykonywania:

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

Warto również zauważyć, że funkcja zdefiniowana w jednym $(document).readybloku nie może zostać wywołana z innego $(document).readybloku, właśnie uruchomiłem ten test:

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

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

wyjście było:

hello1
something
hello2

Możesz użyć wielu. Ale możesz również korzystać z wielu funkcji w jednym dokumencie. Już:

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

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Tak, możesz łatwo mieć wiele bloków. Uważaj tylko na zależności między nimi, ponieważ kolejność oceny może nie być zgodna z oczekiwaniami.

Tak , możliwe jest posiadanie wielu wywołań $ (document) .ready (). Nie sądzę jednak, abyś wiedział, w jaki sposób zostaną one wykonane. (źródło)

Tak, jest to możliwe, ale możesz lepiej użyć div #mydiv i użyć obu

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

//and

$("#mydiv").ready(function(){});

Tak, jest całkowicie ok. Ale unikaj robienia tego bez powodu. Na przykład użyłem go do zadeklarowania globalnych reguł witryny osobno niż poszczególnych stron, kiedy moje pliki javascript były generowane dynamicznie, ale jeśli będziesz to robić w kółko, utrudni to czytanie.

Nie możesz również uzyskać dostępu do niektórych metod z innego jQuery(function(){});połączenia, więc to kolejny powód, dla którego nie chcesz tego robić.

Ze starym, window.onloadjednak będziesz wymieniać stary za każdym razem, gdy określisz funkcję.

Tak, możesz.

Wiele sekcji gotowych na dokumenty jest szczególnie przydatne, jeśli inne moduły znajdują się na tej samej stronie, która ich używa. W starej window.onload=funcdeklaracji za każdym razem, gdy podałeś funkcję do wywołania, zastępowała ona starą.

Teraz wszystkie określone funkcje są ustawione w kolejce / układane w stosy (czy ktoś może to potwierdzić?) Niezależnie od tego, w której sekcji dotyczącej dokumentów są określone.

Myślę, że lepszym sposobem jest przejście do nazwanych funkcji (sprawdź to przepełnienie, aby uzyskać więcej informacji na ten temat) . W ten sposób możesz zadzwonić do nich z jednego wydarzenia.

Tak jak:

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

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


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

W ten sposób możesz załadować je w jednej gotowej funkcji.

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

});

Spowoduje to wyświetlenie następujących danych do pliku console.log:

first
second
third

W ten sposób możesz ponownie użyć funkcji do innych zdarzeń.

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

Sprawdź to skrzypce dla działającej wersji

Jest to legalne, ale czasami powoduje niepożądane zachowanie. Jako przykład wykorzystałem bibliotekę MagicSuggest i dodałem dwa wejścia MagicSuggest na stronie mojego projektu i użyłem osobnych funkcji gotowych do dokumentów dla każdej inicjalizacji danych wejściowych. Pierwsza inicjalizacja wejścia działała, ale nie druga, a także nie dawała żadnego błędu, drugie wejście się nie pojawiło. Dlatego zawsze zalecam korzystanie z jednej funkcji gotowości do dokumentów.

Możesz nawet zagnieżdżać funkcje gotowe do dokumentów w dołączonych plikach HTML. Oto przykład użycia jquery:

Plik: 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>

Plik: test_embed.html

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

Dane wyjściowe konsoli:

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

Przeglądarka pokazuje:

test_embed.html

Możesz to również zrobić w następujący sposób:

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

poprzednie odpowiedzi wskazywały na użycie wielu nazwanych funkcji w jednym bloku .ready lub pojedynczej nienazwanej funkcji w bloku .ready, z inną nazwaną funkcją poza blokiem .ready. Znalazłem to pytanie podczas badania, czy istnieje sposób na posiadanie wielu nienazwanych funkcji w bloku .ready - nie mogłem uzyskać poprawnej składni. W końcu to rozgryzłem i miałem nadzieję, że zamieszczając mój kod testowy, pomogę innym, szukając odpowiedzi na to samo pytanie, które miałem