รู้จัก holdReady ของ jQuery เวอร์ชั่น 1.6 เป็นต้นไป

12 November 2012 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

jquery holdready

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery holdready

ดูแล้ว 7,379 ครั้ง

ชะลอการทำงานของ jQuery s ready event. และให้ทำงานในส่วนของ script

ที่กำหนดก่อน แล้วค่อยทำงานในส่วนของ jQuery s ready event.

ทดสอบรันไฟล์ ข้างต้น เพื่อเปรียบเทียบลำดับการทำงาน

ไฟล์ jq_learn121112_1.php case 1

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
 
<script type="text/javascript">
console.log("1");
$.holdReady(true);
$.getScript("myplugin.js", function() {
    console.log("2");
     $.holdReady(false);
     console.log("3");
});
</script>
<script type="text/javascript">
console.log("4");
$(function(){
    console.log("5");
});
console.log("6");
</script>
 
 
 
 
</body>
</html>
<script type="text/javascript">
console.log("7");
</script>

ไฟล์ jq_learn121112_1.php case 2

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
 
<script type="text/javascript">
console.log("1");
//$.holdReady(true);
$.getScript("myplugin.js", function() {
    console.log("2");
//     $.holdReady(false);
     console.log("3");
});
</script>
<script type="text/javascript">
console.log("4");
$(function(){
    console.log("5");
});
console.log("6");
</script>
 
 
 
 
</body>
</html>
<script type="text/javascript">
console.log("7");
</script>

ไฟล์ myplugin.js สำหรับทดสอบ

1 2	`// JavaScript Document` `console.log("test sample plugin");`

ดูผลลัพธ์หลังจากรันโค้ดใน แท็บ console ใน google chrome โดยกด F12

สังเกตลำดับการรันของตัวเลขที่แสดง รวมทั้งผลลัพธ์การทำงานของ ไฟล์ myplugin.js

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ