什么是异步？什么是同步？

image.png

什么是回调？

image.png

回调举例1

  1. function f1(){}
  2. function f2(fn){
  3.     fn()
  4. }
  5. f2(f1)

分析:

1.我没有调用f1
2.我把f1传给f2
3.f2调用了f1
4.f1是写给f2调用的函数，所以f1是回调

回调举例2

  1. function f1(x){
  2.     console.log(x)
  3. }
  4. function f2(fn){
  5.   fn('你好')
  6. }
  7. f2(f1)

代码中的x代表什么？

分析：

1.f2调用了f1，f1是回调
2.f1作为参数，所以fn(‘你好’) => f1(‘你好’)
3.再回头看f1，所以x是参数’你好’

异步和回调的关系

image.png

如何判断同步或者异步

如果一个函数的返回值处于下面几个选项的内部，那么这个函数就是异步函数

  • setTimeout
  • AJAX(即XMLHttpRequest)

  • AddEventListener

    异步函数举例

    举例1

    1. function 摇骰子(){
    2.   setTimeout(()=>{
    3.     return parseInt(Math.random()*6)+1
    4. },1000)
    5. // return undefined
    6. }

    分析1

  • 摇骰子()没有写return，默认return undefined，所以摇骰子没有返回值

  • 定时器里面的函数 return 了一个parsInt函数，返回真正的结果，所以这是一个异步函数

    分析2

    1. const n = 摇骰子()
    2. console.log(n)

  • 结果仍为undefined，因为摇骰子里面没有return

    分析3

    怎么拿到异步结果？ 答：使用回调，写个函数，把函数地址给摇骰子(),然后要求摇骰子函数得到结果后把结果作为参数传给f1

  1. function f1(x){console.log(x)}
  2. 摇骰子(f1)
  3. function 摇骰子(fn){
  4.     setTimeout(()=>{
  5.       fn(parseInt(Math.random()*6)+1)
  6.   }.1000)
  7. }

异步总结

image.png