同步-异步-回调 （二）

什么是回调函数

---

官方解释：

A callback is a function that is passed as an argument to another
function and is executed after its parent function has completed.

注意：回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调，还可以有事件处理回调和延迟函数回调

为什么要写回调

---

1.关于回调函数和js单线程以及js异步机制

我们都知道js是单线程的，这种设计模式给我们带来了很多的方便之处，我们不需要考虑各个线程之间的通信，也不需要写很多烧脑的代码，也就是说js的引擎只能一件一件事的去完成和执行相关的操作，所以所有需要执行的事情都像排队一样，等待着被触发和执行，可是如果这样的话，如果在队列中有一件事情需要花费很多的时间，那么后面的任务都将处于一种等待状态，有时甚至会出现浏览器假死现象，例如其中有一件正在执行的一个任务是一个死循环，那么会导致后续其他的任务无法正常执行，所以js在同步机制的缺陷下设计出了异步模式

在异步执行的模式下，每一个异步的任务都有其自己一个或着多个回调函数，这样当前在执行的异步任务执行完之后，不会马上执行事件队列中的下一项任务，而是执行它的回调函数，而下一项任务也不会等当前这个回调函数执行完，因为它也不能确定当前的回调合适执行完毕，只要引它被触发就会执行

比如：图片资源还未请求完毕

上图可以看到，我要购买一个东西，当我点进物品的详情页之后，图片资源还未请求完毕，而此时我就可以点击add to cart, 发起另一个请求，js任务列表中的添加购物车事件就会开始执行，它的执行也不会干扰到图片资源的请求任务，这也是异步执行机制的妙处

2.js的单线程浏览器内核的多线程

浏览器常驻三大线程: js引擎线程，GUI渲染线程，浏览器事件触发线程

在浏览器的内核中分配了多个线程，最主要的线程之一即是js引擎的线程，同时js事件队列中的异步请求，交互事件触发，定时器等事件都是由浏览器的事件触发线程进行监听的，浏览器的事件触发线程被触发后会把任务加入到js 引擎的任务队列中，当js 引擎空闲时候就会开始执行该任务

同步回调

---

同步回调函数是要等到回调函数都执行完成后才能进行接下来的操作，也就是说是阻塞式运行

function waitFive(callback){
      var currentDate = new Date();
      var pus = 0;
      while(pus<5000){
        var date = new Date();
        pus = date - currentDate;
      }
      callback("执行完成");
    }
    waitFive(function(msg){console.log(msg);});
    console.log("进行第二步操作；");
    
    **执行结果为：**
 
       执行完成
       进行第二步操作
   
  

分析：

因为是同步回调函数，所以是要先等waitFive函数执行完成后，才能执行console.log("进行第二步操作；");

异步回调

---

异步回调函数不需要等到回调函数都执行完成后才能进行接下来的操作，也就是说是非阻塞式运行。

function waitFive(callback){
      setTimeout(function(callback){
      callback("执行完成")；
      
      }，5000)；
    }
    waitFive(function(msg){console.log(msg);});
    console.log("进行第二步操作；");
    
    **执行结果为：**
       进行第二步操作
       执行完成

分析：

因为是异步回调函数，所以是不需要先等waitFive函数执行完成后，才能执行console.log("进行第二步操作；");