JavaScript中的同步异步问题

JavaScript中的同步异步问题

当我们去想到JS中的同步异步问题的时候，我们就必须要知道JS的执行机制
那么JS是什么执行机制呢

JS是单线程的执行机制

JS是单线程

什么是单线程呢？

JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

这是因为JS这门脚本语言诞生的使命所致——JS是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应先进行添加之后再删除
单线程就意味着：所有任务需要排队，前一个任务结束，才会执行下一个任务，这样会导致一个问题：如果JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步和异步

我们知道了JS单线程机制的缺点，所以为了解决这个问题，利用多核CPU的计算能力，HTML5提出了WebWorker标准，允许JS脚本创建多个线程，于是，JS中出现了同步和异步

同步：前一个任务结束后再执行下一个任务
异步：在做一件事的同时，还可以做别的

形象点地拿做菜做比喻说：

同步 :我们要烧水煮饭，等水开了（10min之后），再去切菜，炒菜
异步 ：我们在烧水的同时，利用这10min，去切菜，炒菜
本质区别 ：这条流水栈上各个流程的执行顺序不同

同步任务都是在主线程上执行，形成一个执行栈
异步任务是通过回调函数执行的

一般而言，异步任务有以下三种类型

1. 普通事件：如click，resize等
2. 资源加载：如load，error等
3. 定时器：包括setInterval，setTimeout等

异步任务相关的回调函数添加到任务队列中（也称作消息队列）

JS的执行机制

1. 先执行执行栈中的同步任务
2. 异步任务放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

以下代码的结果是什么

 console.log(1);

 setTimeout(function () {
     console.log(3);
 }, 0);

 console.log(2);
 //1 2 3

思考一下下面这个代码

 console.log(1);
 document.onclick = function() {
   console.log('click');
 }

 setTimeout(function() {
   console.log(3)
 }, 3000)
 console.log(2);

由于主线程不断地重复获得任务，执行任务，再获取任务，再执行，所以这种机制背称作 事件循环