เมื่อใดที่ฉันควรใช้ฟังก์ชัน document.ready ของ jQuery

107

ฉันได้รับคำสั่งให้ใช้ document.ready เมื่อฉันเริ่มใช้ Javascript / jQuery เป็นครั้งแรก แต่ฉันไม่เคยเรียนรู้ว่าทำไม

อาจมีคนให้คำแนะนำพื้นฐานเกี่ยวกับเวลาที่เหมาะสมในการห่อรหัส javascript / jquery ไว้ใน jQuery's document.ready ?

บางหัวข้อที่ฉันสนใจ:

.on()วิธีการของ jQuery : ฉันใช้.on()วิธีสำหรับ AJAX ค่อนข้างน้อย (โดยทั่วไปจะใช้องค์ประกอบ DOM ที่สร้างแบบไดนามิก) ตัว.on()จัดการคลิกควรอยู่ด้านในเสมอ document.readyหรือไม่?
ประสิทธิภาพ: มีประสิทธิภาพมากกว่าในการเก็บวัตถุ javascript / jQuery ต่างๆไว้ภายในหรือภายนอกเอกสารแล้ว (เช่นกันความแตกต่างของประสิทธิภาพมีนัยสำคัญหรือไม่?)
ขอบเขตออบเจ็กต์: เพจที่โหลด AJAX ไม่สามารถเข้าถึงอ็อบเจ็กต์ที่อยู่ในเอกสารของเพจก่อนหน้าได้ถูกต้องหรือไม่ พวกเขาสามารถเข้าถึงได้เฉพาะวัตถุที่อยู่นอก document.ready (เช่นวัตถุ "global" อย่างแท้จริง)?

อัปเดต:เพื่อปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดจาวาสคริปต์ทั้งหมดของฉัน (ไลบรารี jQuery และรหัสแอปของฉัน) จะอยู่ที่ด้านล่างของหน้า HTML ของฉันและฉันกำลังใช้deferแอตทริบิวต์บนสคริปต์ที่มี jQuery บนหน้าที่โหลด AJAX ของฉันเพื่อที่ฉัน สามารถเข้าถึงไลบรารี jQuery บนเพจเหล่านี้

— ทิมปีเตอร์สัน
แหล่งที่มา

2

เพราะถ้า DOM ไม่พร้อมคุณอาจได้รับผลลัพธ์ที่ไม่คาดคิดนั่นคือทั้งหมด

— Robert Harvey

1

2.- ฉันใช้ภายนอกเพื่อแก้จุดบกพร่องและสามารถเรียกใช้ var / function โดยคอนโซลได้

— jd_7

@RobertHarvey ผลลัพธ์ที่ "คาดไม่ถึง" แบบไหน? คุณช่วยยกตัวอย่างได้ไหม

— tim peterson

3

คุณพยายามแก้ไของค์ประกอบหรือแอตทริบิวต์ที่ยังไม่ได้สร้างเป็น DOM

— Robert Harvey

143

พูดง่ายๆว่า

$(document).readyคือเหตุการณ์ที่จะเริ่มขึ้นเมื่อdocumentพร้อม

สมมติว่าคุณได้วางโค้ด jQuery ไว้ในheadส่วนและพยายามเข้าถึงdomองค์ประกอบ (จุดยึด, img ฯลฯ ) คุณจะไม่สามารถเข้าถึงได้เนื่องจากhtmlถูกตีความจากบนลงล่างและองค์ประกอบ html ของคุณจะไม่ปรากฏเมื่อโค้ด jQuery ของคุณ วิ่ง

เพื่อเอาชนะปัญหานี้เราวางโค้ด jQuery / javascript (ซึ่งใช้ DOM) ไว้ใน$(document).readyฟังก์ชันซึ่งจะเรียกเมื่อทุกdomองค์ประกอบสามารถเข้าถึงได้

และนี่คือเหตุผลเมื่อคุณวางโค้ด jQuery ที่ด้านล่าง (หลังจากองค์ประกอบ dom ทั้งหมดก่อนหน้านี้</body>) ไม่จำเป็นต้องมี$(document).ready

ไม่จำเป็นต้องวางonmethod ไว้ข้างใน$(document).readyก็ต่อเมื่อคุณใช้onmethod on documentเนื่องจากเหตุผลเดียวกับที่ฉันอธิบายข้างต้น

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

แก้ไข

จากความคิดเห็น

$(document).readyไม่ต้องรอภาพหรือสคริปต์ นั่นคือความแตกต่างที่ยิ่งใหญ่ระหว่าง$(document).readyและ$(document).load
เฉพาะรหัสที่เข้าถึง DOM เท่านั้นที่ควรอยู่ในตัวจัดการที่พร้อมใช้งาน หากเป็นปลั๊กอินไม่ควรอยู่ในเหตุการณ์พร้อม

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

@Dipaks ใช่ทำไมไม่? แค่เราชินกับการใช้$(document).readyมาก ดูสิ่งนี้

— Jashwant

ตราบเท่าที่คุณโหลด jQuery ในheadและคุณเป็นสคริปต์หลังจากที่องค์ประกอบถูกจัดการแล้วdocument.readyก็ไม่จำเป็น รูปภาพเป็นกรณีพิเศษแม้ว่า ...

— elclanrs

@elclanrs ดูคำถามที่อัปเดตของฉัน ฉันกำลังโหลด jQuery ที่ด้านล่างของหน้า HTML พร้อมกับโค้ดเฉพาะแอปของฉันหลังจากนั้น

— tim peterson

@ Jashwant ความแตกต่างของประสิทธิภาพของ dom.ready เทียบกับ not อย่างไร? ผู้ที่เกี่ยวข้องหรือไม่

— tim peterson

1

เราไม่ใส่jQueryรหัสทั้งหมดในตัวจัดการพร้อม รหัสเท่านั้นที่เข้าถึง DOM หากเป็นปลั๊กอินไม่ควรอยู่ในready เหตุการณ์

— Juan Mendes

7

คำตอบ:

วิธีการ. on () ของ jQuery: ฉันใช้เมธอด. on () สำหรับ AJAX ค่อนข้างน้อย (การสร้างองค์ประกอบ DOM แบบไดนามิก) ตัวจัดการคลิก. on () ควรอยู่ในเอกสารเสมอ?

ไม่ไม่เสมอไป หากคุณโหลด JS ของคุณในส่วนหัวเอกสารคุณจะต้อง หากคุณกำลังสร้างองค์ประกอบหลังจากโหลดหน้าผ่าน AJAX คุณจะต้อง คุณไม่จำเป็นต้องทำหากสคริปต์อยู่ด้านล่างองค์ประกอบ html ที่คุณกำลังเพิ่มตัวจัดการด้วย

ประสิทธิภาพ: มีประสิทธิภาพมากกว่าในการเก็บวัตถุ javascript / jQuery ต่างๆไว้ภายในหรือภายนอกเอกสารแล้ว (เช่นกันความแตกต่างของประสิทธิภาพมีนัยสำคัญหรือไม่?)

มันขึ้นอยู่กับ. จะใช้เวลาเท่ากันในการแนบตัวจัดการขึ้นอยู่กับว่าคุณต้องการให้มันเกิดขึ้นทันทีที่หน้ากำลังโหลดหรือถ้าคุณต้องการให้รอจนกว่าจะโหลดเอกสารทั้งหมด ดังนั้นจะขึ้นอยู่กับสิ่งอื่น ๆ ที่คุณกำลังทำอยู่บนหน้า

ขอบเขตออบเจ็กต์: เพจที่โหลด AJAX ไม่สามารถเข้าถึงอ็อบเจ็กต์ที่อยู่ในเอกสารของเพจก่อนหน้าได้ถูกต้องหรือไม่ พวกเขาสามารถเข้าถึงได้เฉพาะวัตถุที่อยู่นอก document.ready (เช่นวัตถุ "global" อย่างแท้จริง)?

โดยพื้นฐานแล้วเป็นฟังก์ชันของตัวเองดังนั้นจึงสามารถเข้าถึง vars ที่ประกาศในขอบเขตทั่วโลก (นอก / เหนือฟังก์ชันทั้งหมด) หรือด้วย window.myvarname = '';

— จัสติน
แหล่งที่มา

6

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

$(document).ready(function() {  
    console.log('ready!');  
});

สิ่งนี้จะเรียกใช้ฟังก์ชั่นที่เราส่งผ่านไปยัง .ready () เมื่อเอกสารพร้อม เกิดอะไรขึ้นที่นี่? เรากำลังใช้ $ (document) เพื่อสร้างวัตถุ jQuery จากเอกสารของเพจของเราจากนั้นเรียกใช้ฟังก์ชัน. พร้อม () บนวัตถุนั้นส่งผ่านฟังก์ชันที่เราต้องการเรียกใช้

เนื่องจากนี่เป็นสิ่งที่คุณจะพบว่าตัวเองทำมากมายจึงมีวิธีการชวเลขสำหรับสิ่งนี้หากคุณต้องการ - ฟังก์ชัน $ () ทำหน้าที่สองครั้งเป็นนามแฝงสำหรับ $ (document) .ready () หากคุณส่งฟังก์ชัน:

$(function() {  
    console.log('ready!');  
});

นี่เป็นการอ่านที่ดี: Jquery Fundamentals

— ทอมซาร์ดู
แหล่งที่มา

3

อย่าสับสนกับ(function($){ })(jQuery);รหัสของคุณเพื่อให้ $ เป็น jQuery ภายในการปิดนั้น

— John Magnolia

3

.ready () - ระบุฟังก์ชันที่จะดำเนินการเมื่อ DOM โหลดเต็มที่

$(document).ready(function() {
  // Handler for .ready() called.
});

นี่คือรายการวิธีการ jQuery ทั้งหมด

อ่านเกี่ยวกับการแนะนำ $ (document) .ready ()

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

3

เพื่อความเป็นจริงdocument.readyไม่จำเป็นสำหรับสิ่งอื่นใดนอกจากการจัดการ DOM อย่างถูกต้องและไม่จำเป็นเสมอไปหรือเป็นตัวเลือกที่ดีที่สุด สิ่งที่ฉันหมายถึงคือเมื่อคุณพัฒนาปลั๊กอิน jQuery ขนาดใหญ่ตัวอย่างเช่นคุณแทบจะไม่ใช้มันตลอดทั้งโค้ดเพราะคุณพยายามทำให้มันแห้งดังนั้นคุณจึงนามธรรมให้มากที่สุดเท่าที่จะเป็นไปได้ในวิธีการที่จัดการกับ DOM แต่ควรจะเรียกใช้ หลังจากนั้น. เมื่อโค้ดทั้งหมดของคุณถูกรวมเข้าด้วยกันอย่างแน่นหนาวิธีการเดียวที่เปิดเผยdocument.readyมักจะเป็นinitจุดที่เวทมนตร์ DOM ทั้งหมดเกิดขึ้น หวังว่านี่จะตอบคำถามของคุณ

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

0

คุณควรผูกการดำเนินการทั้งหมดใน document.ready เพราะคุณควรรอจนกว่าเอกสารจะโหลดเต็มที่

แต่คุณควรสร้างฟังก์ชันสำหรับการกระทำทั้งหมดและเรียกใช้จากภายใน document.ready เมื่อคุณสร้างฟังก์ชัน (อ็อบเจ็กต์ส่วนกลางของคุณ) เรียกใช้เมื่อใดก็ได้ที่คุณต้องการ ดังนั้นเมื่อข้อมูลใหม่ของคุณโหลดและสร้างองค์ประกอบใหม่แล้วให้เรียกใช้ฟังก์ชันเหล่านั้นอีกครั้ง

ฟังก์ชันเหล่านี้คือฟังก์ชันที่คุณเชื่อมโยงเหตุการณ์และรายการการดำเนินการ

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

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— Pulkit Mittal
แหล่งที่มา

0

ฉันต่อท้ายลิงก์ไปยัง div และต้องการทำงานบางอย่างเมื่อคลิก ฉันเพิ่มโค้ดด้านล่างองค์ประกอบที่ต่อท้ายใน DOM แต่ใช้งานไม่ได้ นี่คือรหัส:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

มันไม่ได้ผล. จากนั้นฉันวางโค้ด jQuery ไว้ใน $ (document) แล้วและมันก็ทำงานได้อย่างสมบูรณ์ นี่คือ

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— ปลอดภัยกว่า Ahmed
แหล่งที่มา

-2

เหตุการณ์พร้อมเกิดขึ้นเมื่อโหลด DOM (รูปแบบวัตถุเอกสาร) แล้ว

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

วิธีการ ready () ระบุสิ่งที่จะเกิดขึ้นเมื่อเหตุการณ์พร้อมเกิดขึ้น

เคล็ดลับ: ไม่ควรใช้เมธอด ready () ร่วมกับ.

— Shrikant Shiledar
แหล่งที่มา