讲代码没有按照编写顺序执行海量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

种高难度的开发方式，比如上一提到的那道经典的笔试题，就是异步造成的输出结果与预期不一

致。

这一我们就来深入讲解前端工程师熟悉但并不完全了解的JavaScript异步。

了解异步

异步和同步

相比异步而言，大多数工程师可能更熟悉的是同步。

要比较同步和异步，可以将调用函数的过程分成两部分：执行操作和返回结果。

程序在同步调用函数的时候，会立即执行操作并等待得到返回结果后再继续运行，也就是说同步执行是

阻塞的。

而异步会将操作和结果在时间上分隔开来，在当下执行操作，在未来某个时刻返回结果，在这个等待返

回结果的过程中，程序将继续执行后面的代码。也就是说异步执行是非阻塞的。

再举个简单的例子来说明同步和异步。

下面的代码定义了同步函数syncAdd和异步函数asyncAdd，调用syncAdd(1,2)函数时会等待得到结

果再执行后面的代码。而调用asyncAdd(1,2,console.log)时则会在得到结果之前继续执行，直到

1秒后得到结果并打印。

functionsyncAdd(a,b){

returna+b;

}

syncAdd(1,2)

functionasyncAdd(a,b,cb){

setTimeout(function(){

cb(a+b);

},1000)

}

asyncAdd(1,2,console.log)

异步与回调

如果你经常调用JavaScript的异步函数可能会形成一个结论：异步操作都采用回调函数的形式。

毕竟从浏览器端的DOM、AJAX请求、定时器到Node.js端的文件读写、多进程，都是采用的回

调形式。但事实真是如此吗？

下面是一段简单的代码，定义了一个JSON对象a，然后把它打印到控制台，最后再将对象a的

couter.index属性值自增1。

vara={

counter:{

index:1

}

};

console.log(a);

a.counter.index++;

如果你把上面的代码粘贴到浏览器控制台中运行，应该可以看到控制台打印了一个可能和你预期不

一致的JSON对象：{conter:{index:2}}。

在于浏览器在运行代码的时候，把控制台打印这种涉及I/O的操作进行了延迟执行。可能你会猜想

是不是控制台打印的只是将对象a进行了类似“浅拷贝”的操作，否定这种猜想很简单，此时再执行一次

自增操作，就会发现被打印的对象值并没有发生变化。

既然并非所有异步都回调，那么反过来，是否所有回调函数都是异步执行的呢？答案也是否定的。

在上一中我们就提到过回调形式的同步函数，比如数组原型函数forEach，又比如改变this指向的

call。

异步原理

回顾了异步的基础概念，下面就来深入讲解异步的原理。

循环

对于大多数语言而言，实现异步会通过启动额外的进程、线程或协程来实现，而我们面已经提到

过，JavaScript是单线程的。

为什么单线程还能实现异步呢？

其实也没有什么特殊的黑魔法，只是把一些操作交给了其他线程处理，然后采用了一种称之为“循

环”（也称“轮询”）的机制来处理返回结果。

下面用一段简化的代码，来帮助你快速地理解循环机制。

数组eventLoop表示队列（也有称作“任务队列”），用来存放需要执行的任务（可以理解为

回调函数），对象event变量表示当前需要执行的任务。

用一个永不停止的while循环来表示循环，每一次循环称为一个tick。

对每个tick而言，如果在队列中有等待，那么就会从队列中获取一个并执行，这些通常是

回调函数的形式。

vareventLoop=[];

varevent;

while(true){

if(eventLoop.length0){

event=eventLo