技術筆記

Callback

延續昨天setTimeout的例子，只是把setTimeout中的匿名函式改為具名函式，講解上比較容易。

console.log("開始");

setTimeout(print, 2000);
 
function print() {
console.log("這是一個非同步操作，將在2秒後執行");
}
console.log("繼續執行其他程式碼");

//結果：
//開始
//繼續執行其他程式碼

//這是一個非同步操作，將在2秒後執行

其中print 就是個callback函式

簡單來說，callback function就是等某件事完成後，要做的事

callback function初學常犯錯誤

• 傳入的是函式，而非函式回傳結果

  console.log("開始");
  
  setTimeout(print(), 2000);
  
  function print() {
  console.log("這是一個非同步操作，將在2秒後執行");
  }
  console.log("繼續執行其他程式碼");
  
  //結果：
  //開始
  //這是一個非同步操作，將在2秒後執行
  //繼續執行其他程式碼
  

  要傳入的是print，而非print()
  • print為函式
  • print()為執行函式
    這樣寫等於先執行了print，所以會依序印出，不會等到2秒後才執行

Callback Function - Error First

• 以下引述huli老師的例子與重點

舉個例子，這就好像是餐廳的內外場，假設我負責外場，有人點了一碗牛肉麵，我就會朝廚房大喊：「一碗牛肉麵！」，就繼續服務下一個客戶了。喊完之後內場有沒有真的開始做牛肉麵？我不知道，但應該要有。內場如果牛肉賣完了做不出來，我喊的當下也是不會知道的。
那我要怎麼知道？
假設牛肉真的賣完了，內場會主動來跟我說嘛，這時候我才會知道牛肉賣完了。

依照慣例，通常 callback function 的第一個參數都是 err，用來告訴你有沒有發生錯誤

• 為什麼setTimeout沒有err這個參數?
  • 因為「過了 n 秒」不會有錯

心得

前幾天花了老半天的時間看call back，一篇看過一篇，當自覺看不懂時，就換下一篇，但反而越來越不能靜下心，沒想到今天重回第一篇huli老師寫的文章，重新比對setTimeout的例子後才驚覺自己一直把非同步跟callback function搞混了，現在想想自己自動把他們畫上等號的想法好荒謬，setTimeout是非同步，而setTimeout倒數計時完要做的事才是那個神神秘秘的callback function，幫callback function喊冤：我就在你眼前，但你卻看不見XD然後慶幸我終於開天眼了

參考資料

• JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2021/10/24
今天阿咖在找一個玩具⋯
爸爸：就在你眼前還找不到，你眼睛怎麼了？
阿咖：你有戴眼鏡我沒有內！