ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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 ต่อในทันที

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
โปรแกรม Kdenlive ตัดเสียงรบกวนอย่างไรคะ
โดย Kannaphat ศ 22 ม.ค. 2021 3:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
10
ศ 22 ม.ค. 2021 3:24 pm โดย mindphp
ขอวิธีดึงข้อมูลใน list มาแสดงเป็นข้อความทีละบรรทัด
โดย chakirin.bfds พฤ 21 ม.ค. 2021 6:38 pm บอร์ด Programming - C/C++ & java & Python
2
21
พฤ 21 ม.ค. 2021 7:14 pm โดย chakirin.bfds
อะไรบ้างที่คุณต้องรู้เกี่ยวกับการ ‘ซ่อมนาฬิกา’ !
โดย totheworld พฤ 21 ม.ค. 2021 3:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พฤ 21 ม.ค. 2021 3:05 pm โดย totheworld
ขอวิธีบันทึกหน้าจอในนิมบัสโดยที่ไม่ติด URL และสามารถเปลี่ยน Tab ได้
โดย Kannaphat พฤ 21 ม.ค. 2021 1:55 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
29
ศ 22 ม.ค. 2021 3:07 pm โดย Kannaphat
ของวิธีแก้การเขียน Python เเล้วติด UnicodeEncodeError
โดย chakirin.bfds พฤ 21 ม.ค. 2021 11:27 am บอร์ด Programming - C/C++ & java & Python
2
20
พฤ 21 ม.ค. 2021 11:43 am โดย chakirin.bfds
Apple A14 Bionic ที่สุดของ CPU iPhone 12 ดีจริงไหมไปหาคำตอบกัน
โดย Anonymous อ 19 ม.ค. 2021 11:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
25
พ 20 ม.ค. 2021 11:53 pm โดย DanielPe
ใช้ <i> ใส่ชื่อ icon ที่จะใช้แล้วไม่แสดงบนหน้าจอ
โดย eange08 อ 19 ม.ค. 2021 7:31 pm บอร์ด HTML CSS
1
15
อ 19 ม.ค. 2021 7:36 pm โดย eange08
สอบถามการดึงค่าใน array ที่ได้จาก api กรมอุตุ
โดย eange08 อ 19 ม.ค. 2021 4:43 pm บอร์ด Programming - PHP
2
32
อ 19 ม.ค. 2021 6:48 pm โดย eange08