jQuery - หลาย $ (เอกสาร). Ready …?

คำถาม:

หากฉันลิงก์ในไฟล์ JavaScript สองไฟล์ทั้งที่มี$(document).readyฟังก์ชั่นจะเกิดอะไรขึ้น หนึ่งเขียนทับอีกหรือไม่ หรือทั้งสอง$(document).readyได้รับการเรียก?

ตัวอย่างเช่น,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

ฉันแน่ใจว่าเป็นวิธีปฏิบัติที่ดีที่สุดในการรวมการโทรทั้งสองเข้าไว้ด้วยกัน$(document).readyในสถานการณ์ของฉัน

ทั้งหมดจะได้รับการดำเนินการและในวันแรกที่เรียกว่าพื้นฐานการทำงานครั้งแรก !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

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

อีกสิ่งหนึ่งที่ฉันอยากจะพูดถึง

ในสถานที่นี้

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

คุณสามารถใช้ทางลัดนี้

jQuery(function(){
   //dom ready codes
});

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

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

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

$ (เอกสาร) .ready (); เหมือนกับฟังก์ชั่นอื่น ๆ มันจะยิงเมื่อเอกสารพร้อม - โหลดเช่น คำถามคือเกี่ยวกับสิ่งที่เกิดขึ้นเมื่อ $ (เอกสาร) .ready () หลายรายการถูกไล่ออกไม่ใช่เมื่อคุณใช้งานฟังก์ชั่นเดียวกันภายในหลาย ๆ $ (เอกสาร). Ready ()

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

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

โดยสรุปหากเป็นไปได้ให้ใช้เพียง $ 1 (เอกสาร) .ready ();

// คำตอบเก่า

พวกเขาทั้งสองจะถูกเรียกตามลำดับ วิธีปฏิบัติที่ดีที่สุดคือการรวมเข้าด้วยกัน แต่ไม่ต้องกังวลหากเป็นไปไม่ได้ หน้าจะไม่ระเบิด

การดำเนินการคือจากบนลงล่าง มาก่อนเสริฟก่อน.

หากลำดับการดำเนินการมีความสำคัญให้รวมเข้าด้วยกัน

ทั้งสองจะได้รับเรียกมาเสิร์ฟก่อนได้ก่อน ลองดูที่นี่

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

เอาท์พุท:

เอกสารพร้อม 2 ถูกเรียก!

ไม่ต้องตัดเธรด แต่ภายใต้jQueryไวยากรณ์ที่แนะนำล่าสุดคือ:

$( handler )

การใช้ฟังก์ชั่นนิรนามจะเป็นเช่นนี้

$(function() { ... insert code here ... });

ดูลิงค์นี้:

https://api.jquery.com/ready/