关于JS中同步和异步的一点说明

  大家可能都知道，JS语言的执行环境是单线程的。

所谓单线程就是指一次只能完成一件任务，如果有多个任务，就必须排队，等前面一个任务执行完成，再执行后面一个任务，依次进行。

好处：实现起来比较简单，执行环境相对单纯。

缺点：只要存在一个任务耗时很久，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死）往往就是因为某一段JS代码长时间运行（比如死循环），导致整个页面卡在某个任务，其它任务无法执行。

那么为了解决这个问题。JS将任务的执行模式分为两种：同步（synchronous） 和 异步（asynchronous）。

同步上面已经介绍过，即后一个任务等前一个任务结束后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步模式则完全不同，每一个任务有一个多多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序不是一致的。

异步模式非常重要。在浏览器端，耗时很长的操作都应该是异步执行，避免浏览器失去响应，最好的列子就是ajax操作。

异步调用不会阻止代码的顺序执行，而是在将来的某一个时刻触发设置好的逻辑，所以我们：

1.并不知道逻辑什么时候会被调用；

2.只能定义当触发的时候逻辑是什么；

3.只能等待，同时可以去处理其他的逻辑；

setTimeout就是这样的一个异步调用。

var a = 1;
function f1(a){
console.log("I am in f1");
setTimeout(function(){a+=2;console.log("f1:" + a);},1000)}
f1(a);
console.log("out:" + a);

 

得到的结果如下图所示：

I am in f1
out:1
f1:3

结果表明代码执行过程中确实是先执行了f1函数，在执行console.log输出后，setTimeout的回调函数在执行过程中被挂起，知道1s后才被调用，在等待执行setTImeout回调函数的时间里，JS选择执行后面的任务，即执行了console.log("out:" + a)；

实际上，异步函数，如setTimeout和setInterval，是被压入了称之为Event Loop的队列。

Event Loop是一个回调函数队列。当异步函数执行时，回调函数会被压入这个队列。JavaScript引擎直到异步函数执行完成后，才会开始处理事件循环。这意味着JavaScript代码不是多线程的，即使表现的行为相似。事件循环是一个先进先出（FIFO）队列，这说明回调是按照它们被加入队列的顺序执行的。JavaScript被 node选做为开发语言，就是因为写这样的代码多么简单啊。