บทที่ 5 jQuery Effect ตอนที่ 2 (callback funtion)
jQuery Callback Functions
จากที่ได้เคยได้อธิบายเรื่อง Query Effect ไว้ใน บทที่ 5 jQuery Effect ตอนที่ 1 แล้วในบทนี้เราจะมาพูดถึงฟังก์ชัน callback ของกันบ้าง
syntax ของ jQuery Effect
$(selector).hide(speed,callback); ***speed(ความเร็ว) อาจกำหนดเป็น slow, fast, normal หรือกำหนดเป็นมิลลิวินาทีก็ได้
callback คือ function ที่ถูกเรียกใช้งานเมื่อ animated complete ใช้เมื่อเราต้องการให้ jQuery ทำคำสั่งแรกจนเสร็จก่อน แล้วจึงค่อยเริ่มทำคำสั่งที่สอง
syntax ของ jQuery Effect นั้นประกอบด้วย speed และ callback ซึ่งทั้งสองตัวนี้เป็นตัวเสริมที่มีมาเพิ่มเติมลูกเล่นของ Effect ให้หลากหลายมากขึ้น
1.ตัวอย่างการใช้งานฟังก์ชัน callback
<html>
<head>
<meta charset="utf-8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("10000",function(){
alert("กำลังซ่อนข้อความ");
});
});
});
</script>
</head>
<body>
<button>ซ่อน</button>
<p>อยากเรียน jQuery อ่านใน www.mindphp.com ซิจ๊ะ</p>
</body>
</html>คลิกดูตัวอย่าง callback
2.ตัวอย่างที่ไม่ใช้งานฟังก์ชัน callback
<html>
<head>
<meta charset="utf-8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(10000);
alert("กำลังซ่อนข้อความ");
});
});
</script>
</head>
<body>
<button>ซ่อน</button>
<p>อยากเรียน jQuery อ่านใน www.mindphp.com ซิจ๊ะ</p>
</body>
</html>คลิกดูตัวอย่างแบบ without-callback
****จากตัวอย่างที่1 กับตัวอย่างที่2 จะสังเกตว่า มีที่ต่างกันคือตัวอย่างที่1 แบบมีฟังก์ชัน callback จะใช้เป็น $("p").hide("10000",function(){ กับ ตัวอย่างที่2 แบบไม่มีฟังก์ชัน callback จะใช้เป็น $("p").hide(10000); ซึ่งทั้งสองตัวอย่างให้ผลลัพธ์ที่แตกต่างกันคือ ตัวอย่างที่1 แบบมีฟังก์ชัน callback เมื่อคลิกที่ปุ่ม "ซ่อน" จะทำการซ่อนข้อความจนเสร็จแล้วจึงมีการ alert ต่างกับ ตัวอย่างที่2 แบบไม่มีฟังก์ชัน callback เมื่อคลิกปุ่ม "ซ่อน" จะทำการซ่อนข้อความแล้วตามด้วยการ alert ต่อมาติดๆ โดยไม่รอให้การซ่อนข้อความนั้นเสร็จก่อน ก็ alert ต่อในทันที
