Tags:

คือผมอ่านมาหลายเว็บๆในGoogleทั้งไทยทั้งอังกฤษก็ยังไม่งงๆอยู่ ช่วยยกตัวอย่างง่ายๆแบบเปรียบเทียบหรืออะไรก็ได้ครับสำหรับคนเพิ่งเริ่มต้น ผมเรียนผ่าน www.Udacity.com
เท่าที่ผมอ่านมาแล้วสรุปได้คือ function มี 2 แบบ คือ sync กับ async
- sync คือ การที่ให้ function ทำงานทีละคำสั่งคำสั่งที่1เสร็จถึงจะเริ่มรันคำสั่งที่2ได้
- async คือ การที่ให้ function ทำงานโดยที่ไม่ต้องรอให้คำสั่งก่อนหน้าเสร็จก็รันคำสั่งต่อไปได้เลย
ส่วน Callback เป็น function ประเภท async ซึ่งที่อ่านมาตามเว็บต่างๆก็จะบอกว่า Callback เรียกง่ายๆว่าการโทรกลับ
ปล1.ผมเข้าใจถูกมั้ยครับ

รูปแบบของ function callback
1 function name(option,callback){
2 callback(result);
3 }
- ตัว option คืออะไร
- callbackต่อจากoptionคืออะไร
- callback(result)บรรทัดที่2ทำหน้าที่เหมือนreturnส่งค่ากลับไปในfunctionรึป่าวครับ

ปล2. รูปแบบถูกมั้ยครับ

การเรียกใช้ function callback
1 name(function(result){ });

  -แต่ละตัวทำงานอย่างไงครับ

ตอนไหนถึงใช้ function callback ครับ ขอความกรุณายกตัวอย่างการใช้งานแบบง่ายๆได้มั้ยครับ อันนี้อ่านกี่เว็บก็ไม่เข้าใจสักที

ปล3.ขอบคุณที่สละเวลามาช่วยตอบครับ มือใหม่มากๆพยามฝึกอยู่ครับ

Get latest news from Blognone
By: Aize
ContributorWindows PhoneAndroidWindows
on 24 July 2017 - 14:56 #999314
Aize's picture

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

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

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

testCallBack(1,callBack);

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


The Dream hacker..

By: panyawat on 24 July 2017 - 17:04 #999346 Reply to:999314

เจอโค้ดไปงงตึบเลยครับ T.T
ขนาด3คนข้างล่างอธิบายมายาวเลยผมยังงงๆอยู๋เลยครับ มันจำเป็ฯต้องทำเข้าใจก่อนจะไปเรียนเรื่องอื่นมั้ยครับหรือข้ามไปก่อนได้จนกว่าจะใช้จริงค่อยกลับมาศึกษาอาจจะเข้าใจขึ้นมากกว่านี้ครับ T.T

By: hisoft
ContributorWindows PhoneWindows
on 24 July 2017 - 17:07 #999352 Reply to:999346
hisoft's picture

เรื่องที่จำเป็นต้องเข้าใจเบื้องต้นมีแค่เข้าใจการประกาศและเรียกใช้ฟังก์ชันครับ แค่นั้น ถ้าจะเข้าใจว่าทำไมต้องใช้ก็อาจจะอ่านเรื่อง async เพิ่มเติม


The Phantom Thief

ฮือ อัพรูปเป็น gif ไม่ได้ (T-T)

By: grit
iPhoneWindows PhoneWindows
on 28 July 2017 - 17:08 #1000193 Reply to:999346

ควรข้ามไปก่อนครับ ผมงมมาหลายเดือนจนคิดว่าเริ่มเข้าใจ closure แล้ว จนเริ่มมาศึกษา Reactive Programming แล้ว ผมว่าผมยังไม่เข้าใจ callback อย่างแท้จริงเลย บางทีอาจจะต้องมองเห็นและเข้าใจจุดอื่นก่อนถึงจะเข้าใจในอีกจุดได้มากขึ้น เคยคิดว่าจะไม่ยุ่ง Frontend เพราะคิดว่าสู้ทำ Backend ไม่ได้ มาวันนี้ซึ้งเลย Frontend มันมีอะไรมากกว่าที่เคยคิด


User-Agent: IAmAI/1.0
This comment was POST requested by AI.

By: hisoft
ContributorWindows PhoneWindows
on 24 July 2017 - 15:59 #999328
hisoft's picture

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


The Phantom Thief

ฮือ อัพรูปเป็น gif ไม่ได้ (T-T)

By: panyawat on 24 July 2017 - 17:03 #999351 Reply to:999328

ไม่เข้าใจตั้งแต่ตรงนี้เลยครับ

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

  • ดังนั้น foo จึงเรียกฟังก์ชัน c ขึ้นมา โดยส่งค่า value ไปด้วย ทำไมต้องเรียกคำสั่ง c ขึ้นมาอีกครับ(เหมือนreturnส่งค่ากลับไปยังvalueรึป่าวครับ)
  • แล้วก็ทำไมพารามิเตอร์ v ถึงมีค่า 'tcg3'ครับ
By: hisoft
ContributorWindows PhoneWindows
on 24 July 2017 - 17:29 #999359 Reply to:999351
hisoft's picture

ทำไมต้องเรียกคำสั่ง c ขึ้นมาอีกครับ(เหมือนreturnส่งค่ากลับไปยังvalueรึป่าวครับ)

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

แล้วก็ทำไมพารามิเตอร์ v ถึงมีค่า 'tcg3'ครับ

ใน foo ผม let value = a + b; ครับ ซึ่ง a + b = 'tcg' + 3 = 'tcg3' ครับ แล้วพอเรียก c(value) มันก็เลยเท่ากับการเรียก c('tcg3') แล้วตัว callback ที่ผมส่งมามันเป็น function(v) (ฟังก์ชันที่รับพารามิเตอร์หนึ่งตัวชื่อว่า v) มันก็เลยจับ 'tcg3' ใส่เข้าไปใน v ครับ

คำตอบยาวจากข้างบนครับ
บอกก่อนว่า callback เป็นชื่อที่เรียกกันผ่านๆ แต่ตัวมันเองไม่ได้มีตัวตนเป็นของตัวเองนะครับ เป็นการเอามาประยุกต์ใช้
จุดต่างจริงจังของ callback กับการ return ค่ามันคือแบบนี้ครับ
การ return ค่ากลับมาจากฟังก์ชัน เป็นการเรียกใช้ฟังก์ชัน แล้วฟังก์ชันนั้นส่งค่ากลับมาให้เราครับ
การใช้ callback หลังใช้ฟังก์ชัน เป็นการที่เราเรียกใช้ฟังก์ชัน แล้วส่งชุดคำสั่งไปด้วยว่าจะให้เอาค่าที่ได้ไปทำอะไรต่อครับ
ที่เราใช้ callback กันเนี่ย เนื่องจาก js มันทำงานแบบ async เป็นปกติครับ ดังนั้นถ้าผมให้ foo return ค่า value ออกมาตรงๆ แล้วไปเรียก

let value = foo('tcg', 3);
console.log(value);

ตรงๆ แบบนี้ มันมีโอกาสที่มันจะไม่ทำงานแบบที่หวังครับ เพราะว่ากว่าที่ foo จะทำงานเสร็จเนี่ย โปรแกรมมันรันคำสั่ง console.log(value) ไปแล้วครับ ซึ่ง value มันยังไม่มีค่าเลยเพราะ foo ยังทำงานไม่เสร็จ

เนื่องจากในยุคแรกยังไม่มี async/await หรือกระทั่ง Promise มาให้ใช้ (ถ้ายังไม่เคยศึกษาก็ข้ามไปก่อนครับ) มันเลยแทบจะเป็นไปไม่ได้ที่จะเอาค่าที่ return จาก foo ออกมาใช้โดยตรงครับ เราเลยต้องส่งชุดคำสั่งไปด้วยในรูปของฟังก์ชันที่เราเรียกกันว่า callback ว่าหลังจากที่ foo ทำงานเสร็จแล้วเนี่ย ค่าที่ได้มาจะให้เอามันไปทำอะไรต่อบ้าง

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


The Phantom Thief

ฮือ อัพรูปเป็น gif ไม่ได้ (T-T)

By: whitebigbird
Contributor
on 24 July 2017 - 16:09 #999332
whitebigbird's picture

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

By: panyawat on 24 July 2017 - 16:57 #999349 Reply to:999332

ตรงบรรทัดสุดท้ายเรียกแค่afterProcessได้เลยใช่มั้ยครับไม่ต้องใส่เป็นafterProcess()

By: whitebigbird
Contributor
on 24 July 2017 - 17:32 #999362 Reply to:999349
whitebigbird's picture

afterProcess() คือการทำให้ function นั้นทำงานครับ

afterProcess คือชื่อ function เฉยๆ สิ่งที่เราส่งคือส่ง function ครับ ฉะนั้นไม่ต้องมี ()

By: hisoft
ContributorWindows PhoneWindows
on 24 July 2017 - 16:08 #999333
hisoft's picture

อธิบาย 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 จริงๆ หรือยังสับสนบางอย่างอยู่นะครับ ถ้ายังไงอ่านคอมเมนต์ก่อนหน้าแล้วถ้ายังสงสัยลองถามอีกทีนึงครับ ;)


The Phantom Thief

ฮือ อัพรูปเป็น gif ไม่ได้ (T-T)

By: panyawat on 24 July 2017 - 17:08 #999353 Reply to:999333

เกือบเข้าใจแล้วครับ T.T มันยากหรือผมงงเองก็ไม่รู้ เดี๋ยวผมกลับไปศึกษาเรื่องfunctionเพิมอีกรอบดีกว่าครับ ขอบคุณครับ

By: whitebigbird
Contributor
on 24 July 2017 - 17:33 #999363 Reply to:999353
whitebigbird's picture

ถ้าเข้าใจว่า literal คืออะไร จะทำให้ง่ายขึ้นครับ

By: soginal
AndroidIn Love
on 24 July 2017 - 17:53 #999369
soginal's picture

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

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

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


When your hammer is C++, everything begins to look like a thumb.