การเรียกใช้งาน callback มันใช้ได้หลายรูปแบบมากๆ ครับ แต่หลักๆ คือ เป็นการโยนฟังชั่นไปด้วย เพื่อให้เรียกใช้ฟังชั่นนี้หลังจากที่ขั้นตอนต่างๆ จบลง หรือตรงไหนก็ได้ระหว่างทาง

อย่าง ปล.1 option คืออะไรก็ได้ที่ฟั่งชั้นนั้นใช้อย่างเช่น
function callBack(){ console.log("OK"); }

function testCallBack(testNum,_callBack){
if(testNum>0){ _callBack(); }
}

testCallBack(1,callBack);

อาจจะดูคล้าย การ return กลับมา แต่แทนที่จะรอการคืนค่ามา กลับโยนฟังชันไปให้ทำงานแทน

ถ้าคำว่า callback มันทำให้งง ลองเลิกคิดชื่อ callback แล้วคิดว่ามันเป็นฟังก์ชันฟังก์ชันนึงดูครับ (อาจทำให้เข้าใจง่ายขึ้น) สมมติผมมีฟังก์ชันนึง รับ parameter 3 ตัว โดยตัวสุดท้ายจะรับเป็นฟังก์ชันที่เรียกๆ กันว่า callback แต่ในครั้งนี่ผมเรียกมันว่า c เฉยๆ แล้วกันครับจะได้ข้ามชื่อ callback ไป

function foo (a, b, <del>callback</dell>c) {
  let value = (a + b);
  c(value);
}

พอผมเรียกใช้

foo('tcg', 3, function (v) {
 console.log( v );
};

สิ่งที่เกิดขึ้นมันคือ เราเรียกฟังก์ชัน foo โดยส่ง parameter ไปสามตัวครับ ตัวแรกคือ string 'tcg' ตัวที่สองคือ number 3 และตัวสุดท้ายคือ function นึงที่รับพารามิเตอร์ตัวนึงชื่อ v ครับ

ฝั่ง foo เมื่อโดนเรียกก็ได้รับพารามิเตอร์มาสามตัวครับ ตัวแรกมีชื่อว่า a มีค่า 'tcg' ตัวที่สองชื่อ b มีค่า 3 และตัวสุดท้ายชื่อ c ซึ่งเป็นฟังก์ชัน
ได้รับค่ามาเสร็จ foo ก็สร้างตัวแปรชื่อ value มา มีค่า = a + b = 'tcg3' ครับ
พอสร้าง value เสร็จก็ไปทำคำสั่งถัดไป คือ c(value) ซึ่งก็คือการเรียกฟังก์ชัน c ที่เป็นฟังก์ชันที่ได้รับมาอีกทีนึงครับ ดังนั้น foo จึงเรียกฟังก์ชัน c ขึ้นมา โดยส่งค่า value ไปด้วย

ฝั่ง c เมื่อโดนเรียกก็ได้รับพารามิเตอร์ชื่อ v มีค่า 'tcg3' ครับ แล้วก็ไป console.log(v) ก็เรียกฟังก์ชัน log ของ console แล้วส่งค่า 'tcg3' ไป

แค่นั้นครับ อันนี้คืออธิบายการทำงานตรงๆ อย่าไปยึดกับคำว่า callback ครับ คือถ้าคิดว่ามันเป็นการเรียกกลับแบบที่เค้าอธิบายกันมันก็ได้ (คือวิ่งไปที่ฟังก์ชันนู้น เสร็จแล้วเรียกกลับมาทำงานต่อที่นี่) หรือถ้าแบบที่ผมอธิบายมันจะค่อนข้างไปทาง เรียกฟังก์ชันนู้นแล้วส่งฟังก์ชันอีกฟังก์ชันนึงไปด้วย ฟังก์ชั่นนู้นทำงานแล้วก็จะเรียกฟังก์ชันที่เราแนบไปทำงานต่ออีกทีนึง (ก็ไม่ต่างกันเท่าไหร่ แต่ถ้าช่วยให้เข้าใจได้ก็จะดีครับ)

callback ก็คือ function แต่ที่ตั้งตัวแปรว่า callback เพราะต้องการให้ชื่อมันสื่อ ว่า function นั้นเอาไปทำอะไร

สมมติมี JavaScript ดังนี้


function asyncProcess(callback) {
//TODO: this is a processing code;
callback();
}


// Usage example:


function afterProcess() {
alert('Done');
}


asyncProcess(afterProcess);


การทำงานของ code คือ มันจะทำงาน asyncProcess จนจบ แล้วก็เรียกกลับมาที่ callback (ตรงตัวว่าเรียกกลับ) หลังจากทำงานเสร็จ

callback นี่จะเรียกว่าเป็น callback หรือ handler ก็ได้แต่ datatype ของตัวแปร คือ function

อธิบาย callback ไปแล้ว ขอกลับไปที่เนื้อหานะครับ

ส่วน Callback เป็น function ประเภท async ซึ่งที่อ่านมาตามเว็บต่างๆก็จะบอกว่า Callback เรียกง่ายๆว่าการโทรกลับ
ปล1.ผมเข้าใจถูกมั้ยครับ

callback เป็นได้ทั้ง async และ sync ครับ แล้วแต่ว่าเราจะส่งแบบไหนไป

รูปแบบของ function callback
1 function name(option,callback){
2 callback(result);
3 }

• ตัว option คืออะไร

option นั้นก็ parameter ตัวนึงครับ จริงๆ อาจมีได้มากกว่านั้นหรือจะรับเป็น object ที่แนบหลายๆ ตัวในตัวเดียวหรืออะไรก็ได้แล้วแต่จะทำ

• callbackต่อจากoptionคืออะไร

ออปเจคที่เป็นฟังก์ชันครับ คือเราจะรับฟังก์ชันมาด้วยฟังก์ชันนึง

• callback(result)บรรทัดที่2ทำหน้าที่เหมือนreturnส่งค่ากลับไปในfunctionรึป่าวครับ

ราวๆ นั้นครับ คือเนื่องจากฟังก์ชันที่ชื่อ name นี้เราส่งค่ากลับโดยตรงไม่ได้เนื่องด้วยสาเหตุบางอย่างตามที่ออกแบบไว้ (อาจจะเพราะ sync/async หรือเหตุผลอื่นๆ) ดังนั้นเราจึงต้องเอาค่าที่ดำเนินการเสร็จแล้ว (result) ส่งไปทำงานต่อกับฟังก์ชันชื่อ callback ที่ได้รับมา

ปล2. รูปแบบถูกมั้ยครับ
การเรียกใช้ function callback
1 name(function(result){ });
-แต่ละตัวทำงานอย่างไงครับ
ตอนไหนถึงใช้ function callback ครับ ขอความกรุณายกตัวอย่างการใช้งานแบบง่ายๆได้มั้ยครับ อันนี้อ่านกี่เว็บก็ไม่เข้าใจสักที
ปล3.ขอบคุณที่สละเวลามาช่วยตอบครับ มือใหม่มากๆพยามฝึกอยู่ครับ

คิดว่าคำถามนี้มาจากที่ยังไม่เข้าใจตัว callback จริงๆ หรือยังสับสนบางอย่างอยู่นะครับ ถ้ายังไงอ่านคอมเมนต์ก่อนหน้าแล้วถ้ายังสงสัยลองถามอีกทีนึงครับ ;)

callback มันก็คือ function ธรรมดานี่แหละ เราโยนใส่ function อื่นอีกทีเพื่อให้ function นั้นเรียกใช้
กรณีที่เห็นได้ชัดคือ function ที่เราเรียกใช้นั้นเป็น function ที่เราไม่รู้ว่ามันจะทำงานเสร็จเมื่อไหร่หรือใช้เวลาทำงานนานมากและไม่สามารถให้มันรอจนกว่าจะทำงานเสร็จได้ (ไม่งั้น browser จะค้าง)

อย่างเช่น function setTimeout(callback, 10000)
setTimeout มันโยนงานไปไว้ในส่วนของ background (time schedule)
โค๊ดของเราเมื่อสั่ง setTimeout มันก็จะทำงานและ return มาทันทีและไปทำงานในโค๊ดถัดไปทันที

แต่งานจริงๆจะทำไปเมื่อผ่านไป 10 วิ function setTimeout ก็จะเรียกใช้ "callback()" เพื่อรันงานที่เรามอบให้มัน