异步和回调

什么是同步和异步

先来看一段代码

console.log(1)
setTimeout(function(){console.log(2)},0)
console.log(3)//1,3,2

代码执行的结果如上所示为1,3,2 很明显与书写的顺序1,2,3不一致,所以我们可以简单的理解为代码的执行顺序与书写顺序不同时就是异步.相对应的,代码顺序与执行顺序相同的就是同步.

为什么有同步和异步

由于js同时只能执行一个任务(即单线程,这个单线程是主线程),所以后面的任务只能在队列中等待前一个的执行.当一个任务不能立刻得到结果时就会形成阻塞效应.这就是同步的缺陷.例如:taskC一定要等待taskB的结果.

function taskB(){
  var response = $.ajax({
    url:"/data.json",
    async: false 
  })
  return response 
}

taskA()
taskB()
taskC()

为了解决该问题,js会暂时将其放在任务队列中等待,同时不断检查任务队列中任务状态,一旦队列中的任务得到结果(例如ajax从服务器得到结果)就重新将该任务放回主线程(一般采用回调函数的形式).
异步模式下,tackB请求ajax数据时taskC已经开始执行,taskB暂时放在任务队列等待结果,当有结果时重新进入主线程执行.

function taskB(){
  var result= $.ajax({
    url:"/data.json",
    async: true
  })
  return result
}

taskA()
taskB()
taskC()

常见的异步操作模式

回调函数

function f1(callback) {
  callback();
}
function f2() {
 console.log("f2被调用")
}
f1(f2);

事件监听

f1.on('done', f2);
function f1() {
  setTimeout(function () {
    f1.trigger('done');
  }, 1000);
}
function f2(){console.log("f2被调用")}
//f2会在f1执行1s后被调用

发布/订阅

事件可以理解成”信号“，如果存在一个”信号中心“，某个任务执行完成，就向信号中心”发布“（publish）一个信号，其他任务可以向信号中心”订阅“（subscribe）这个信号，从而知道什么时候自己可以开始执行

回调函数

维基百科的解释是:

回调函数，或简称回调（Callback 即call then back 被主函数调用运算后会返回主函数），是指通过函数参数传递到其它代码的，某一块可执行代码的引用。在js中允许简单的将函数名作为参数传递。

知乎上最高票的回答是用了一个比喻:

你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。
https://www.zhihu.com/question/19801131/answer/13005983

所以传给对方一个函数,当对方在合适的时机调用这个函数,这个函数就是回调函数.如下所示,当f2作为f1的参数传给f1,当f1执行到相应位置时就会调用f2,这里f2就是回调函数.

function f1(callback) {
  console.log(1)
  callback();
}

function f2() {
  console.log(2)
}

f1(f2);

回调函数的优点是便于理解,缺点是代码间耦合程度高且程序流程不明晰,不方便理解维护.