Day10-CallBack

前言

终於要开始进入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天。

/images/emoticon/emoticon02.gif


<<:  LeetCode解题 Day10

>>:  Day3-"if-else"

世界上最快乐的人 (2) 有所缘禅修

安住在对境上 - 有所缘的禅修 无所缘禅修之所以困难,因为太过简单。心的本质(觉性)很难辨认。反而容...

[day-26] Python-设计属於自己的函式

甚麽是函式?   函式(Function),是一段可以重复调用的程序,也可以当作子程序或称作副程序,...

[Day30] 身为产品经理的反省与再出发

过去一年,其实我走过一段很艰辛的路程,会说艰辛,是因为现在回首起来,中间的一切是那麽的不容易,过程中...

D30 - 「来互相伤害啊!」:猫狗集合!

有场景了,来让人物登场吧!(≧∀≦) 首先将场景载入游戏中。 src\components\wind...

【Day 15】Function - Practice 1

前言 其实分享我写题目的过程也算是一种自我检讨,所以使用的方法可能不会是最完美的,还请各读者多多包涵...