js的异步回调机制

首先先要明确一个js调取的准则：同步优先，异步靠边，回调垫底，也就是说，在执行代码的过程中，js会按顺序依次执行同步操作，遇到异步操作或者回调的时候会将对应的事件添加到他们相应的队列中去，不执行，进而继续执行同步操作，等到所有的异步操作执行完毕的时候，再去异步的队列中执行异步操作，之后再又去回调的队列中执行回调的操作。即：同步=》异步=》回调。

比如下面这个在网上找到的例子：

let a = new Promise(
    function(resolve, reject) {
      console.log(1)
      setTimeout(() => console.log(2), 0)
      console.log(3)
      console.log(4)
      resolve(true)
    }
  )
  a.then(v => {
    console.log(8)
  })
   
  let b = new Promise(
    function() {
      console.log(5)
      setTimeout(() => console.log(6), 0)
    }
  )
   
  console.log(7)
  

执行的结果应该是1 3 4 5 7 8 2 6

分析原因大概是下面的流程：首先进行同步操作，输出1 3 4 5 7，执行过程中，2，6是回调操作，他们按顺序依次被放入回调的队列中去。8是一个异步操作，所以他被放入异步操作中去。执行完所有同步操作之后现在开始执行异步操作，从队列中取出8的操作，输出后，异步操作队列空，现在进行回调操作，从队列中依次去除2 6操作并顺序执行。由此，整个过程结束。

js为什么会这样做？

首先，js的运行环境是单线程的。

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

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。