Bisakah Anda memiliki beberapa $ (dokumen). Sudah (fungsi () {...}); bagian?

Jika saya memiliki banyak fungsi pada startup, semuanya harus di bawah satu:

$(document).ready(function() {

atau bisakah saya memiliki beberapa pernyataan seperti itu?

Anda dapat memiliki lebih dari satu, tetapi tidak selalu merupakan hal yang paling rapi untuk dilakukan. Usahakan untuk tidak menggunakannya secara berlebihan, karena akan sangat memengaruhi keterbacaan. Selain itu, sangat legal. Lihat di bawah ini:

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

Coba ini:

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

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

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

Anda akan menemukan bahwa ini setara dengan ini, perhatikan urutan eksekusi:

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

Perlu juga dicatat bahwa fungsi yang didefinisikan dalam satu $(document).readyblok tidak dapat dipanggil dari $(document).readyblok lain , saya hanya menjalankan tes ini:

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

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

output adalah:

hello1
something
hello2

Anda bisa menggunakan banyak. Tetapi Anda juga dapat menggunakan banyak fungsi di dalam satu dokumen. Sudah juga:

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

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

Ya, Anda dapat dengan mudah memiliki beberapa blok. Berhati-hatilah dengan ketergantungan di antara mereka karena urutan evaluasi mungkin tidak seperti yang Anda harapkan.

Ya , mungkin memiliki beberapa panggilan $ (dokumen) .ready (). Namun, saya tidak berpikir Anda bisa tahu bagaimana mereka akan dieksekusi. (sumber)

Ya itu mungkin tetapi Anda bisa lebih baik menggunakan div #mydiv dan menggunakan keduanya

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

//and

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

Ya, itu baik-baik saja. Tapi hindari melakukannya tanpa alasan. Sebagai contoh saya menggunakannya untuk mendeklarasikan aturan situs global secara terpisah dari halaman individual ketika file javascript saya dihasilkan secara dinamis tetapi jika Anda terus melakukannya berulang-ulang akan membuatnya sulit untuk dibaca.

Anda juga tidak dapat mengakses beberapa metode dari jQuery(function(){});panggilan lain sehingga itu alasan lain Anda tidak ingin melakukan itu.

Dengan yang lama window.onloadmeskipun Anda akan mengganti yang lama setiap kali Anda menentukan fungsi.

Ya kamu bisa.

Beberapa bagian siap dokumen sangat berguna jika Anda memiliki modul lain yang keluar dari halaman yang sama yang menggunakannya. Dengan window.onload=funcdeklarasi lama , setiap kali Anda menentukan fungsi yang akan dipanggil, itu menggantikan yang lama.

Sekarang semua fungsi yang ditentukan dalam antrian / ditumpuk (dapatkah seseorang mengonfirmasi?) Terlepas dari bagian siap dokumen mana mereka ditentukan.

Saya pikir cara yang lebih baik untuk pergi adalah untuk menempatkan beralih ke fungsi bernama (Periksa melimpah ini untuk lebih lanjut tentang subjek itu) . Dengan begitu Anda dapat memanggil mereka dari satu peristiwa.

Seperti itu:

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

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


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

Dengan begitu Anda dapat memuatnya dalam satu fungsi siap pakai.

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

});

Ini akan menampilkan yang berikut ke console.log Anda:

first
second
third

Dengan cara ini Anda dapat menggunakan kembali fungsi untuk acara lain.

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

Periksa biola ini untuk versi yang berfungsi

Itu legal, tetapi kadang-kadang menyebabkan perilaku yang tidak diinginkan. Sebagai contoh, saya menggunakan pustaka MagicSuggest dan menambahkan dua input MagicSuggest di halaman proyek saya dan menggunakan fungsi siap dokumen terpisah untuk setiap inisialisasi input. Inisialisasi Input pertama berfungsi, tetapi tidak yang kedua dan juga tidak memberikan kesalahan, Input Kedua tidak muncul. Jadi, saya selalu menyarankan untuk menggunakan satu Fungsi Siap Dokumen.

Anda bahkan dapat membuat dokumen fungsi siap di dalam file html yang disertakan. Berikut ini contoh menggunakan jquery:

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

File: test_embed.html

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

Output konsol:

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

Browser menunjukkan:

test_embed.html

Anda juga dapat melakukannya dengan cara berikut:

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

jawaban sebelumnya menunjukkan menggunakan beberapa fungsi bernama di dalam blok .ready tunggal, atau fungsi tunggal yang tidak disebutkan namanya di blok .ready, dengan fungsi bernama lain di luar blok .ready. Saya menemukan pertanyaan ini ketika meneliti apakah ada cara untuk memiliki beberapa fungsi yang tidak disebutkan namanya di dalam blok .ready - Saya tidak bisa mendapatkan sintaks yang benar. Saya akhirnya menemukan jawabannya, dan berharap bahwa dengan memposting kode pengujian saya, saya akan membantu orang lain mencari jawaban atas pertanyaan yang sama dengan yang saya miliki.