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

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

jquery holdready

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

ชะลอการทำงานของ 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 สำหรับทดสอบ

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

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

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

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

Tags:: jquery holdready

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน