Können Sie mehrere $ (document) .ready (function () {…}) haben? Abschnitte?

Wenn ich beim Start viele Funktionen habe, müssen sie alle unter einer einzigen liegen:

$(document).ready(function() {

oder kann ich mehrere solcher Aussagen haben?

Sie können mehrere haben, aber es ist nicht immer das Schönste. Versuchen Sie, sie nicht zu stark zu verwenden, da dies die Lesbarkeit ernsthaft beeinträchtigt. Davon abgesehen ist es vollkommen legal. Siehe unten:

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

Probieren Sie es aus:

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

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

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

Sie werden feststellen, dass es dem entspricht. Beachten Sie die Reihenfolge der Ausführung:

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

Es ist auch erwähnenswert, dass eine in einem $(document).readyBlock definierte Funktion nicht von einem anderen $(document).readyBlock aus aufgerufen werden kann. Ich habe gerade diesen Test ausgeführt:

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

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

Ausgabe war:

hello1
something
hello2

Sie können mehrere verwenden. Sie können aber auch mehrere Funktionen in einem Dokument verwenden.

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

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

Ja, Sie können leicht mehrere Blöcke haben. Seien Sie nur vorsichtig mit Abhängigkeiten zwischen ihnen, da die Bewertungsreihenfolge möglicherweise nicht Ihren Erwartungen entspricht.

Ja, es ist möglich, mehrere Aufrufe von $ (document) .ready () durchzuführen. Ich glaube jedoch nicht, dass Sie wissen können, auf welche Weise sie ausgeführt werden. (Quelle)

Ja, es ist möglich, aber Sie können besser ein div #mydiv verwenden und beide verwenden

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

//and

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

Ja, es ist vollkommen in Ordnung. Aber vermeiden Sie es, es ohne Grund zu tun. Zum Beispiel habe ich es verwendet, um globale Site-Regeln getrennt von einzelnen Seiten zu deklarieren, als meine Javascript-Dateien dynamisch generiert wurden. Wenn Sie es jedoch immer wieder tun, wird es schwer lesbar.

Außerdem können Sie von einem anderen jQuery(function(){});Aufruf aus nicht auf einige Methoden zugreifen. Dies ist ein weiterer Grund, warum Sie dies nicht tun möchten .

Mit dem alten window.onloadersetzen Sie das alte jedoch jedes Mal, wenn Sie eine Funktion angegeben haben.

Ja, du kannst.

Mehrere dokumentenbereite Abschnitte sind besonders nützlich, wenn andere Module auf derselben Seite arbeiten, auf der sie verwendet werden. Mit der alten window.onload=funcDeklaration wurde jedes Mal, wenn Sie eine aufzurufende Funktion angegeben haben, die alte ersetzt.

Jetzt werden alle angegebenen Funktionen in die Warteschlange gestellt (kann jemand bestätigen?), Unabhängig davon, in welchem ​​dokumentenbereiten Abschnitt sie angegeben sind.

Ich denke, der bessere Weg ist, auf benannte Funktionen umzuschalten (Weitere Informationen zu diesem Thema finden Sie in diesem Überlauf) . Auf diese Weise können Sie sie von einem einzelnen Ereignis aus aufrufen.

Wie so:

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

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


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

Auf diese Weise können Sie sie in einer einzigen Bereitschaftsfunktion laden.

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

});

Dadurch wird Folgendes in Ihr console.log ausgegeben:

first
second
third

Auf diese Weise können Sie die Funktionen für andere Ereignisse wiederverwenden.

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

Überprüfen Sie diese Geige für die Arbeitsversion

Es ist legal, aber manchmal verursacht es unerwünschtes Verhalten. Als Beispiel habe ich die MagicSuggest-Bibliothek verwendet und zwei MagicSuggest-Eingaben auf einer Seite meines Projekts hinzugefügt und für jede Initialisierung von Eingaben separate dokumentenbereite Funktionen verwendet. Die allererste Eingangsinitialisierung hat funktioniert, aber nicht die zweite und auch ohne Fehler. Die zweite Eingabe wurde nicht angezeigt. Daher empfehle ich immer, eine Dokumentbereitschaftsfunktion zu verwenden.

Sie können sogar dokumentenfertige Funktionen in enthaltenen HTML-Dateien verschachteln. Hier ist ein Beispiel mit jquery:

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

Datei: test_embed.html

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

Konsolenausgabe:

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

Browser zeigt:

test_embed.html

Sie können dies auch folgendermaßen tun:

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

Die vorherigen Antworten zeigten, dass mehrere benannte Funktionen innerhalb eines einzelnen .ready-Blocks oder eine einzelne unbenannte Funktion im .ready-Block mit einer anderen benannten Funktion außerhalb des .ready-Blocks verwendet wurden. Ich habe diese Frage gefunden, als ich nachgeforscht habe, ob es eine Möglichkeit gibt, mehrere unbenannte Funktionen im .ready-Block zu haben - ich konnte die Syntax nicht richtig einstellen. Ich fand es endlich heraus und hoffte, dass ich durch das Posten meines Testcodes anderen helfen würde, nach der Antwort auf dieselbe Frage zu suchen, die ich hatte