【JS】JavaScript异步系列（1）——基础部分

前言

前面学习了JS的两座大山（原型和作用域），接下来我们要开始攻克JS的第三座大山——异步啦！

该博客是阅读王福朋的异步系列博客和《你不知道的JavaScript》整理总结而来；
原博客地址：http://www.cnblogs.com/wangfupeng1988/p/6513070.html

---

一、什么是异步

1、异步出现的原因

首先说明一点：JS是单线程的语言。所谓的单线程，即：对于一段程序的运行，按照从上到下的顺序一行一行的执行，若上面没有执行完，则后面的程序就只能傻傻的等着。
看如下的代码

var i, t = Date.now()
for (i = 0; i < 100000000; i++) {
}
console.log(Date.now() - t);//

上面的程序花费 250ms 的时间执行完成，执行过程中就会有卡顿。在执行过程中，其他的事儿就只能先放一边。

如果我们在浏览器中发送一个网络请求，只能等到这个请求有响应了之后才能发送下一个请求，而请求返回的时间又是不可预估的，这样的网站是用户所不能容忍的。

针对这样的情况，JS就设计了异步这种模式——发起一个网络请求后，先不管这边事儿了，先去做其他的事情，网络请求啥时候返回结果，到时候再说。这样就可以保证一个网页的流畅运行了。

《你不知道的JS》中解释的异步为：
   程序的一部分现在运行，另一部分在将来运行——现在和将来之间有段间隙，这段间隙可能是在等待用户输入、从数据库或文件系统中请求数据、通过网络发送数据并等待响应，或者是在以固定时间间隔执行重复任务。而异步就是关于现在和未来的时间间隙的。

2、异步实现的原理

在说原理之前，我们先来看下——event-loop（事件循环）。
关于event-loop，推荐看一个外国人讲解的视频，讲解的生动形象——what the hack is event loop。
然后可以再看看阮一峰老师的《什么是event loop》和《你不知道的JS》中卷的事件循环，应该就基本了解event loop了。

接下来举个例子，看看你对event loop是否有了基本了解了。

console.log('line 1')
setTimeout(console.log, 1000, 'line 2')
console.log('line 3')

正确的输出结果是：line 1， line 3，line 2。你答对了么？

接下来，我们言归正传，先看下面的一段代码：

var ajax = $.ajax({
    url: '/data/data1.json',
    success: function () {
        console.log('success')
    }
})

上面代码中$.ajax()需要传入两个参数进去，url和success，其中url是请求的路由，success是一个函数。这个函数传递过去不会立即执行，而是等着请求成功之后才能执行。对于这种传递过去不执行，等出来结果之后再执行的函数，叫做callback，即回调函数

实现异步的最核心原理，就是将callback作为参数传递给异步执行函数，当有结果返回之后再触发 callback执行

3、常见的异步操作

• 网络请求，如ajax http.get
• IO 操作，如readFile readdir
• 定时函数，如setTimeout setInterval