jQuery document.ready vs ฟังก์ชั่นที่ไม่ระบุชื่อการโทรด้วยตนเอง

137

ความแตกต่างระหว่างสองสิ่งนี้คืออะไร

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

ฟังก์ชั่นทั้งสองนี้ถูกเรียกพร้อมกันหรือไม่? ฉันรู้ว่า document.ready จะถูกเรียกใช้เมื่อเบราว์เซอร์ทั้งหน้า HTML ถูกแสดงผล แต่สิ่งที่เกี่ยวกับฟังก์ชั่นที่ 2 (ฟังก์ชั่นการโทรที่ไม่ระบุชื่อตัวเอง) มันรอให้เบราว์เซอร์แสดงผลหน้าเว็บเสร็จหรือไม่หรือจะถูกเรียกเมื่อใดก็ตามที่พบเจอ?

javascript jquery

— Ashit Vora
แหล่งที่มา

18

สำหรับสิ่งที่คุ้มค่า$(function() {});เทียบเท่ากับ$(document).ready(function() {});

— Ian Henry

1

ฟังก์ชั่นที่ไม่ระบุชื่อผู้โทรจะถูกดำเนินการเมื่อใดก็ตามที่พบ อีกทั้งการแสดงเอกสารบนหน้าจอและการสร้างแบบจำลองวัตถุในหน่วยความจำนั้นไม่เกี่ยวข้องกัน

— Anurag

เกี่ยวข้อง: เหตุใดจึงกำหนดฟังก์ชันที่ไม่ระบุชื่อและส่งผ่าน jQuery เป็นอาร์กิวเมนต์ รูปแบบที่จะใช้กับกระดูกสันหลัง

— Bergi

4

คุณควรตอบคำถามของคุณเมื่อพวกเขาตอบคำถามได้อย่างมีประสิทธิภาพ คุณมีอัตราการตอบรับที่ต่ำมาก

— leigero

วิธีที่ไม่ใช่ jQuery ในการทำอันแรกคือ: document.addEventListener ('domContentLoaded', function () {... });

— Evan Thompson

112

$(document).ready(function(){ ... }); หรือสั้น $(function(){...});

ฟังก์ชั่นนี้เรียกว่าเมื่อDOM is readyซึ่งหมายความว่าคุณสามารถเริ่มการค้นหาองค์ประกอบเช่น .ready()จะใช้วิธีต่างๆในเบราว์เซอร์ที่แตกต่างกันเพื่อให้แน่ใจว่า DOM พร้อมจริงๆ
(function(){ ... })();

นั่นคือไม่มีอะไรอื่นนอกจากฟังก์ชั่นที่จะเรียกตัวเองecma-/javascriptเร็วที่สุดเท่าที่เป็นไปได้เมื่อเบราว์เซอร์ที่มีการแปลความหมายของคุณ ดังนั้นจึงเป็นไปได้ยากมากที่คุณจะประสบความสำเร็จได้DOM elementsที่นี่

— Jandy
แหล่งที่มา

1

@NimChimpsky ฉันสับสน (function () {}); ด้วย $ (ฟังก์ชั่น () {}) คุณตรงกันข้ามกับความผิด;)

— ALH

ฉันสับสนเกี่ยวกับ(function(){ ... })();รหัส JS ที่ไม่ทำงานโดยเร็วที่สุด? หากคุณพูดว่าalert()ภายในใน SIAF หรือภายนอกนั้นผลจะไม่เหมือนเดิมหรือไม่

— skube

2

@skube ใช่โค้ด JS ใด ๆ จะทำงานทันทีที่ parser อ่าน แต่ความสับสนของคุณอาจมาว่ามี "$" ต่อหน้า SIAF หรือไม่ ถ้าเป็นเช่นนั้นและไซต์นี้ใช้ jQuery นี่เป็นรูปแบบย่อของฟังก์ชันตัวช่วยเอกสาร jQuery ซึ่งจะกำหนดเวลาให้ฟังก์ชันที่กำหนดให้เรียกใช้งานเมื่อ DOM พร้อมใช้งาน ฟังก์ชั่นตัวช่วยจะทำงานทันทีที่อ่าน แต่ฟังก์ชั่นที่คุณให้ไว้จะไม่ทำงาน

— Neil Monroe

46

(function(){...})(); จะถูกดำเนินการทันทีที่พบใน Javascript

$(document).ready()จะถูกดำเนินการเมื่อมีการโหลดเอกสาร $(function(){...});เป็นทางลัดสำหรับ$(document).ready()และทำสิ่งเดียวกัน

— คาล
แหล่งที่มา

25

$(document).ready(function() { ... });เพียงแค่ผูกฟังก์ชั่นนั้นเข้ากับreadyเหตุการณ์ของเอกสารดังนั้นเมื่อคุณโหลดเอกสารเหตุการณ์จะเริ่มต้นขึ้น
(function($) { ... })(jQuery);อันที่จริงแล้วเป็นโครงสร้างของ Javascript และชิ้นส่วนของรหัสนั้นจะผ่านjQueryวัตถุเข้าไปfunction($)ในพารามิเตอร์และเรียกใช้ฟังก์ชันดังนั้นภายในฟังก์ชันนั้น$หมายถึงjQueryวัตถุเสมอ สิ่งนี้สามารถช่วยแก้ไขความขัดแย้งของการกำหนดเนมสเปซ ฯลฯ

ดังนั้น # 1 จะถูกดำเนินการเมื่อมีการโหลดเอกสารในขณะที่ # 2 จะถูกเรียกใช้ทันทีโดยมีjQueryวัตถุชื่อ$เป็นชวเลข

— Alan Christopher Thomas
แหล่งที่มา

25

โค้ดต่อไปนี้จะถูกเรียกใช้งานเมื่อ DOM (โมเดลวัตถุเอกสาร) พร้อมสำหรับโค้ด JavaScript เพื่อดำเนินการ

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

มือสั้น ๆ ของโค้ดด้านบนคือ:

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

รหัสที่แสดงด้านล่างเป็นฟังก์ชั่น JavaScript ที่ไม่ระบุชื่อที่เรียกตัวเองและจะดำเนินการทันทีที่เบราว์เซอร์ตีความ:

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

jQuery ฟังก์ชั่นในตัวเองกล่าวอ้างที่แสดงด้านล่างผ่านวัตถุ jQuery function($)ทั่วโลกเป็นอาร์กิวเมนต์ไปยัง สิ่งนี้ช่วย$ให้สามารถใช้งานแบบโลคัลภายในฟังก์ชันการเรียกใช้ตัวเองโดยไม่จำเป็นต้องข้ามขอบเขตโกลบอลสำหรับคำจำกัดความ jQuery ไม่ได้เป็นเพียงไลบรารีเดียวที่ใช้ประโยชน์$ดังนั้นจึงช่วยลดความขัดแย้งในการตั้งชื่อที่อาจเกิดขึ้น

(function($){
  //some code
})(jQuery);

— JSON C11
แหล่งที่มา

2

คำอธิบายการปิด javascript ที่เรียบง่ายชัดเจนและกระชับ

— รหัส

16

document.ready ทำงานหลังจาก DOM "สร้าง" ฟังก์ชั่นการเรียกใช้ตัวเองทำงานทันที - หากใส่เข้าไป<head>ก่อนที่จะสร้าง DOM

— srigi
แหล่งที่มา

6

+1 เพื่อตอบโต้ downvote ที่ไม่จำเป็น อย่างไรก็ตามคำตอบของคุณมีปัญหาเล็กน้อย ฟังก์ชั่นการเรียกใช้ตัวเองจะดำเนินการทุกที่ที่พบเมื่อแยกวิเคราะห์และไม่จำเป็นต้องอยู่ภายใน<head>และกฎจะไม่แตกต่างหลังจาก DOM เริ่มต้นถูกสร้างขึ้น

— Anurag