คุณสามารถมีหลาย $ (เอกสาร). ready (function () {…}); ส่วน?

240

หากฉันมีฟังก์ชั่นมากมายในการเริ่มต้นพวกเขาทั้งหมดจะต้องอยู่ภายใต้หนึ่งเดียว:

$(document).ready(function() {

หรือฉันสามารถมีหลายงบดังกล่าว?

jquery

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

1

ส่วนใหญ่จำเป็นต้องใช้เมื่อฉันต้องการโหลดไฟล์ js หลายไฟล์โดยที่แต่ละไฟล์มี $ (เอกสาร) .ready (); ฟังก์ชั่น

— Abdillah

@leora คำถามนี้ถูกถามในการสัมภาษณ์: D Thanks

— eirenaios

288

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

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

ลองใช้ดู

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

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

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

คุณจะพบว่ามันเทียบเท่ากับสิ่งนี้จดบันทึกลำดับของการดำเนินการ:

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

นอกจากนี้ยังเป็นที่น่าสังเกตว่าฟังก์ชั่นที่กำหนดภายใน$(document).readyบล็อกหนึ่งไม่สามารถเรียกใช้จากอีกบล็อกได้$(document).readyบล็อกฉันเพียงแค่รันการทดสอบนี้:

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

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

ผลลัพธ์คือ:

hello1
something
hello2

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

25

ไม่ควรพึ่งพาลำดับของการดำเนินการเมื่อใช้คำสั่ง $ (เอกสาร). ready () หลายรายการ แต่ละคนต้องการที่จะดำเนินการเป็นอิสระจากคนอื่น ๆ ที่ได้รับการดำเนินการแล้วหรือไม่

— James

@AoP - ฉันไม่รู้ความรู้สึกที่เหมาะสมหากไม่ถูกดำเนินการตามลำดับดังนั้นพวกเขาจึงไม่มีความหมายอย่างสมบูรณ์ภายในบริบทของแอปพลิเคชันดังนั้นใช้ $ (เอกสาร) หลายรายการพร้อมกัน (บล็อกจะเสียทั้งหมด

— karim79

7

@ karim79 แน่นอนว่านี่ (คำถามของ OP) จะใช้งานได้ดีที่สุดเมื่อเขียนโค้ดที่ซับซ้อนเล็กน้อยซึ่งมีข้อกังวลหลายประการในการเริ่มต้น - นั่นคือโค้ดบางตัวที่มักจะทำงานเมื่อโหลดเสร็จสมบูรณ์และบางอันจำเป็นสำหรับโหนดเนื้อหาบางส่วนเท่านั้น? ในสถานการณ์เช่นนี้บริบทควรเป็นไซโลและลำดับของการดำเนินการควรเป็นสาระสำคัญ - ความสามารถในการกำหนดให้กับเหตุการณ์ 'DOM พร้อม' โดยไม่ต้องเขียนทับหน้าที่ก่อนหน้านี้กลายเป็นคุณสมบัติที่มีประโยชน์โดยไม่คำนึงถึงพฤติกรรมการสั่งซื้อ

— tehwalrus

1

เกี่ยวกับฟังก์ชั่นที่กำหนดไว้ในบล็อกที่พร้อมหนึ่งไม่สามารถเรียกได้จากบล็อกพร้อมอื่น - นี่คือความจริงในแบบที่คุณกำหนดฟังก์ชั่น แต่ถ้าคุณกำหนดมันเป็น saySomething = function () {} แทนคุณสามารถเรียกมันได้ แปลกใช่มั้ย jsfiddle.net/f56qsogmทดสอบที่นี่

— ferr

2

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

— Ferr

19

คุณสามารถใช้หลาย ๆ แต่คุณยังสามารถใช้หลายฟังก์ชั่นในเอกสารเดียวได้เช่นกัน:

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

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

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

นี่เป็นการดีถ้าคุณมีการควบคุมรหัสแนบกับหน้า หากมีใครบางคนเขียนข้อความนี้ในไฟล์อื่นที่แนบมากับหน้าเว็บคุณก็ยินดีที่จะประกาศเช่นนี้

— James Wiseman

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

— มิกเคล

2

เพียงแค่พยายามจะบอกว่าบางครั้งชาวบ้านคนอื่น ๆ จะเขียนโมดูลที่แนบมากับหน้าที่มีฟังก์ชั่นพร้อมเอกสารประกาศไว้แล้วดังนั้นคุณอาจไม่มีความหรูหราในการย้ายรหัสทั้งหมดของคุณไปไว้ในฟังก์ชั่นเดียว ) ฉันก็จะระวังที่จะมีสิ่งต่าง ๆ มากเกินไปที่นี่ แต่เนื่องจากเราจะได้รับ On Ready Bloating ซึ่งสามารถสร้างรหัสได้อย่างเท่าเทียมกันยากที่จะรักษา

— James Wiseman

1

อาตอนนี้ฉันได้รับคุณ ใช่ฉันเห็นด้วยกับที่ เพียงแค่ระบุตัวอย่างเพื่อพิสูจน์ว่ามันเป็นไปได้;)

— Mickel

15

ใช่คุณสามารถมีหลายช่วงตึกได้อย่างง่ายดาย เพียงระวังการพึ่งพาระหว่างกันเนื่องจากลำดับการประเมินอาจไม่ใช่สิ่งที่คุณคาดหวัง

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

11

ใช่เป็นไปได้ที่จะมีการโทร $ (เอกสาร) .ready () หลายรายการ อย่างไรก็ตามฉันไม่คิดว่าคุณจะรู้ได้ว่าพวกเขาจะถูกประหารอย่างไร (ที่มา)

— เจดับบลิว
แหล่งที่มา

14

เรียกว่าในคำสั่งซื้อ

— redsquare

ขอบคุณมันเป็นเรื่องดีที่จะทำให้ชัดเจนตั้งแต่ - แม้จะมีความรู้ทั่วไปในเรื่อง - หน้าjQuery ready ()ไม่ได้บอกว่าคุณสามารถทำได้หรือไม่ (ในขณะที่เขียน :)) อย่างไรก็ตามมันบอกเป็นนัย ๆ ว่ามันโอเคถ้าคุณอ่านระหว่างบรรทัดของหนึ่งประโยค:Ready handlers bound this way are executed after any bound by the other three methods above.

— Reg Edit

5

ใช่เป็นไปได้ แต่คุณสามารถใช้ div #mydiv และใช้ทั้งคู่ได้ดีขึ้น

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

//and

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

2

แนวคิดที่น่าสนใจ แต่ทำไมถึงดีกว่า

— ทิม

3

ไม่รองรับการใช้ div หากคุณทำเช่นนี้ด้วยเหตุผลบางอย่างคุณต้องรับความเสี่ยงด้วยตนเอง: วิธีการ. Ready () สามารถใช้ได้กับวัตถุ jQuery ที่ตรงกับเอกสารปัจจุบันเท่านั้น

— Reg Edit

3

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

นอกจากนี้คุณไม่สามารถเข้าถึงวิธีการบางอย่างจากการjQuery(function(){});โทรอื่น ดังนั้นจึงเป็นอีกเหตุผลที่คุณไม่ต้องการทำเช่นนั้น

ด้วยเก่าwindow.onloadแม้ว่าคุณจะแทนที่เก่าทุกครั้งที่คุณระบุฟังก์ชั่น

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

2

ใช่คุณสามารถ.

ส่วนเอกสารพร้อมใช้หลายส่วนมีประโยชน์อย่างยิ่งหากคุณมีโมดูลอื่น ๆ ที่ปิดหน้าเดียวกันกับที่ใช้งาน ด้วยการwindow.onload=funcประกาศเก่าทุกครั้งที่คุณระบุฟังก์ชั่นที่จะเรียกมันจะแทนที่เก่า

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

— เจมส์ผู้วิเศษ
แหล่งที่มา

ใช่มันเป็นความจริงฟังก์ชั่นจะเข้าคิวขึ้นค่าแทนที่ฟังก์ชั่นพร้อม. $ ก่อนหน้า (เอกสาร)

— Deeksy

2

ฉันคิดว่าวิธีที่ดีกว่าที่จะไปคือการเปลี่ยนไปใช้ฟังก์ชั่นที่มีชื่อ(ตรวจสอบล้นนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนั้น) (ตรวจสอบล้นนี้มานานในเรื่องนั้น)ด้วยวิธีนี้คุณสามารถเรียกพวกเขาจากเหตุการณ์เดียว

ชอบมาก

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

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


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

ด้วยวิธีนี้คุณสามารถโหลดได้ในฟังก์ชั่นพร้อมใช้งานเดียว

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

});

สิ่งนี้จะแสดงผลต่อไปนี้ใน console.log ของคุณ:

first
second
third

วิธีนี้คุณสามารถใช้ฟังก์ชั่นซ้ำสำหรับกิจกรรมอื่นได้

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

ตรวจสอบซอนี้สำหรับรุ่นที่ใช้งานได้

— Jelle Verzijden
แหล่งที่มา

0

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

— Nimantha Harshana Perera
แหล่งที่มา

0

คุณยังสามารถซ้อนฟังก์ชันพร้อมใช้งานของเอกสารในไฟล์ html ที่รวมอยู่ด้วย นี่คือตัวอย่างการใช้ jquery:

ไฟล์: 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>

ไฟล์: test_embed.html

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

เอาต์พุตคอนโซล:

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

เบราว์เซอร์แสดง:

test_embed.html

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

0

คุณสามารถทำได้ด้วยวิธีต่อไปนี้:

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

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

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

คุณช่วยอธิบายความแตกต่างนี้กับคำตอบอื่นได้อย่างไร

— สตีเฟ่น Rauch

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

— JEPrice

ขออภัยฉันหมายถึงคำถาม มีปุ่มแก้ไขที่ด้านล่างซ้ายของกล่องข้อความ การอธิบายว่าเพราะเหตุใดโซลูชันของคุณจึงแตกต่าง / ดีกว่าทำให้เป็นคำตอบที่ดีกว่าเนื่องจากผู้อ่านในอนาคตสามารถเข้าใจ "ทำไม" ได้เร็วขึ้น ขอบคุณ

— Stephen Rauch