jQuery document.ready vs self calling anonymous function

139

Apa perbedaan antara keduanya.

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

  2. (function(){ ... })();

Apakah kedua fungsi ini dipanggil pada waktu yang bersamaan? Saya tahu, document.ready akan dipicu ketika seluruh halaman HTML dirender oleh browser tetapi bagaimana dengan fungsi ke-2 (fungsi anonim memanggil sendiri). Apakah menunggu browser selesai merender halaman atau dipanggil setiap kali ditemukan?

javascript jquery Ashit Vora
sumber
18
Untuk apa nilainya, $(function() {});setara dengan$(document).ready(function() {});
Ian Henry
1
Fungsi anonim panggilan diri akan dijalankan setiap kali ditemukan. Juga, sebenarnya merender dokumen di layar dan membuat model objek di memori tidak ada hubungannya.
Anurag
terkait: Mengapa mendefinisikan fungsi anonim dan meneruskannya jQuery sebagai argumen? pada pola mana yang akan digunakan dengan tulang punggung
Bergi
4
Anda harus benar-benar menerima jawaban atas pertanyaan Anda ketika mereka menjawabnya dengan efektif. Anda memiliki tingkat penerimaan yang sangat rendah.
leigero
Cara non-jQuery untuk melakukan yang pertama adalah: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Jawaban:

113

  • $(document).ready(function(){ ... }); atau pendek $(function(){...});

    Fungsi ini dipanggil ketika DOM is readyartinya, Anda bisa mulai membuat kueri elemen misalnya. .ready()akan menggunakan cara berbeda pada browser berbeda untuk memastikan DOM benar-benar siap.

  • (function(){ ... })();

    Itu tidak lain adalah fungsi yang memanggil dirinya sendiri sesegera mungkin saat browser menafsirkan file ecma-/javascript. Oleh karena itu, sangat tidak mungkin Anda berhasil bertindak di DOM elementssini.

jAndy
sumber
1
@NimChimpsky Saya bingung (function () {}); dengan $ (function () {}). Anda kebalikan dari yang salah;)
ALH
Saya bingung, sehubungan dengan (function(){ ... })();tidakkah kode JS berjalan secepat mungkin? Jika Anda mengatakan, alert()di dalam SIAF atau di luarnya, bukankah efeknya akan sama?
skube
2
@skube Ya, semua kode JS akan berjalan segera setelah parser membacanya, tetapi kebingungan Anda mungkin muncul apakah ada "$" di depan SIAF atau tidak. Jika demikian, dan situs ini menggunakan jQuery, maka ini adalah bentuk singkat dari fungsi jQuery document.ready helper, yang akan menjadwalkan fungsi yang diberikan untuk dieksekusi setelah DOM tersedia. Fungsi helper itu sendiri akan berjalan segera setelah dibaca, tetapi fungsi yang Anda berikan tidak akan.
Neil Monroe
46

(function(){...})(); akan dieksekusi segera setelah ditemukan di Javascript.

$(document).ready()akan dijalankan setelah dokumen dimuat. $(function(){...});adalah jalan pintas untuk $(document).ready()dan melakukan hal yang persis sama.

Michal
sumber
25

  1. $(document).ready(function() { ... });cukup mengikat fungsi itu ke readyacara dokumen, jadi, seperti yang Anda katakan, saat dokumen dimuat, peristiwa tersebut dipicu.

  2. (function($) { ... })(jQuery);sebenarnya adalah sebuah konstruksi Javascript, dan semua bagian kode itu lakukan adalah meneruskan jQueryobjek ke function($)sebagai parameter dan menjalankan fungsinya, jadi di dalam fungsi itu, $selalu mengacu pada jQueryobjek. Ini dapat membantu menyelesaikan konflik spasi nama, dll.

Jadi # 1 dijalankan ketika dokumen dimuat, sementara # 2 dijalankan segera, dengan jQueryobjek bernama $singkatan.

Alan Christopher Thomas
sumber
25

Kode berikut akan dieksekusi ketika DOM (Model objek dokumen) siap untuk dieksekusi kode JavaScript.

$(document).ready(function(){
  // Write code here
});

Kependekan dari kode di atas adalah:

$(function(){
  // write code here
});

Kode yang ditunjukkan di bawah ini adalah fungsi JavaScript anonim yang memanggil sendiri, dan akan dijalankan segera setelah browser menafsirkannya:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

Fungsi jQuery self-invoking yang ditunjukkan di bawah ini, meneruskan objek jQuery global sebagai argumen ke function($). Ini memungkinkan $untuk digunakan secara lokal dalam fungsi pemanggilan mandiri tanpa perlu melintasi cakupan global untuk suatu definisi. jQuery bukan satu-satunya pustaka yang memanfaatkan $, jadi ini mengurangi potensi konflik penamaan.

(function($){
  //some code
})(jQuery);
JSON C11
sumber
2
Penjelasan yang sangat sederhana, jelas dan ringkas tentang penutupan javascript.
KODE
16

document.ready run setelah DOM "dibangun". Fungsi pemanggilan sendiri berjalan secara instan - jika dimasukkan ke <head>, sebelum DOM dibuat.

srigi
sumber
6
1 untuk melawan suara negatif yang tidak perlu. Namun, ada sedikit masalah dalam jawaban Anda. Fungsi self-invoking akan dijalankan di mana pun ia ditemukan saat parsing, dan tidak harus berada di dalam <head>, dan aturannya tidak berbeda setelah DOM awal dibuat.
Anurag