前言

終於要開始進入JavaScript重頭戲Callback。

• Callback就是函式呼叫函式

沒了???

對阿!!! 就這樣不開玩笑...

昨日的程式碼

function sum(para) {
  let box = 0
  for(let i = 0; i <= para; i++) {
    box += i
  }
  return box
}
box = 3
console.log(sum(10)) //55

console.log()呼叫sum function就是callback!!!

以下為直接寫法

function callback() {
  function A() {
    console.log('1');
  }
  function B() {
    console.log('2');
  }
  function C() {
    console.log('3');
  }
  A()
  B()
  C()
}
callback()
/*
1
2
3
*/

你說對阿上面就很正常了,幹嘛還要callback???

今天假設我有一件事需要先做好才能繼續往下,如果順序不對那就麻煩了。

而且我想要確定A完成->才執行B

我們使用callback來解決順序控制這回事(sequence control)

function callback() {
  function A(fn) {
    setTimeout(() => { 
      console.log('放學');
      fn() //callback by webapi function
    }, 2000);
  }
  function B(fn) {
    console.log('先洗澡');
    fn()
  }
  function C() {
    console.log('寫功課');
  }

  A(function(){
    B(function(){
      C()
    })
  })
}
callback()

所以我們透過把函式當作參數的方式,解決許多一連串的動作

這邊舉例丟入一個參數,function A先組合,再透過傳遞參數給function B並且輸出。

let user = {
  name: 'Ian',
  age: 22
}

function callback(parameter) {
  function A(data, callback){
    callback(data.name + ' hello')
  }
  function B(inputString){
    console.log(inputString);
  }
  A(parameter,function(string){
    B(string) //Ian hello
  })
}
callback(user)

最後總結一下

• 確保執行順序
• 利用callback讀取參數,依序處理資料
• 但如果太多callback會變成很有名的callback hell

只是要真的理解需要一些時間,但只要每天慢慢練習,總有一天會學會的!!!

很感謝各位看到第10天。