JavaScript异步编程：（一）回调函数

前言

我们常说JavaScript是单线程的，实际是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，不妨叫它主线程。与之对应的其他线程还有处理ajax的线程，定时器线程，读写文件的线程(node.js)等，可以叫它们为工作线程。

前端开发中，我们很少用到异步编程（除了网络请求），但是偶尔会遇到一些耗时的操作，就需要我们通过异步来提高性能；

异步的方式

• 回调函数
• Promise
• await

一、回调函数

异步编程中，复杂的地方在于异步线程执行完毕后，如果通知主线程；

回调函数是简单的通知主线程的方法；

• 封装一个异步方法asyncDoSomething

asyncDoSomething(complete) {
  setTimeout(function(){
    // 异步执行
    console.log('doSomething');
    // 执行完成后，通知主线程
    complete();
  }, 1000)
},

• 调用该异步方法

console.log('start');
// 调用异步方法，在调用成功后，打印complete
this.asyncDoSomething(function(){
  console.log('complete')
})
console.log('end');

• 运行结果

  
  结果

end在doSomething前面打印，说明该方法是异步方法；
complete是在doSomething后，说明complete是在异步方法运行结束之后，才执行的；

二、回调函数的缺点

回调函数虽然帮我们实现了异步编程，但是它有着缺陷：代码混乱、不易阅读；

如果这个异步方法里面逻辑很复杂，需要在不同的情况下，都需要通知主线程，那么意味着我们要写多个回调函数，会导致代码非常混乱，很难阅读，甚至导致难以维护；

console.log("start");
this.asyncDoSomething(() =>{
  console.log("complete");
  this.asyncDoSomething2(() => {
    console.log("complete2");
    this.asyncDoSomething3(() => {
      console.log("complete3");
    });
  });
});
console.log("end");

ps：为了解决这一缺陷，JavaScript引入了Promise;