js事件循环 （Event Loop）机制

1.同步异步模式

1. 我们这里的同步异步 不是指我们写代码的方式 而是指 运行环境提供的 API 是以同步或者异步模式的方式工作
2. 对于同步模式的API 它的特点呢 就是这个任务执行完 它的其它代码才会往下走 例如 console
3. 而对于异步模式的API来说 它就是 下达这个任务开启过后的指令 然后继续往下执行 代码不会在这行等待任务执行结束 例如我们的 setTimeout

1. 同步模式

   • 在单线程中 同步模式下代码会依次执行 在代码执行过程中 首先呢 会先创建一个 匿名函数（anonymous）将要执行的代码放入到执行栈 然后执行第一行代码 这里（变量声明和函数声明是不会被执行的） 遇到函数调用后 会将函数放入到执行栈 然后依次执行

   • 在同步模式下 如果某一行代码执行时间过程 后面的代码会等待上一次代码执行完再执行 这样我们称为代码阻塞
     

   • 什么是同步任务

     • 立即执行的任务队列，这些都是属于同步任务，比如一个简单的函数；console 等

   • 通过下面的代码举例

         // 首先在代码执行的时候会先创建一个匿名函数 anonymous
         // 在执行第一行代码的时候 会先把 console.log('start') 压入到执行栈中 
         console.log('start')  
         // 执行完毕以后 会把执行完的代码 弹出执行栈 现在打印的结果时 start 
         
         // 在这里 遇到函数声明和变量声明 是不会被执行的 直接跳过
         function foo(){
           console.log('foo');
           bar()
         }
         function bar(){
           console.log('bar');
         }
         // 在这里 遇到函数调用 将函数调用放入到 执行栈 这时 执行函数函数  函数内部 
         // 有个console 将console 放入到执行栈 执行完毕后 出栈 现在打印的结果时 start foo , 
         // 遇到bar方法调用 同理 将bar 函数压入到执行栈 对 bar 方法内部的代码做入栈 出栈 
         // 此时的执行结果是 start foo  bar 当前方法执行完毕 
         foo()
         //将当前函数 弹出栈
         // 同理 将console 压栈 出栈 
         console.log('end');
         // 此时执行结果是 start foo  bar end
     

2. 异步模式

     1.异步模式的 API 不会去等待这个任务执行结束才开始执行下一个任务，对于耗时操作一般都是开启这个任务 就立即执行
     下一个任务  耗时任务后续的逻辑一般会通过回调函数的方式定义 （在内部耗时任务完成之后 会自动执行
     我们传入的回调函数）如果没有异步模式的话 单线程的JavaScript 就无法同时处理大量耗时任务
     
     2.在异步模式下 异步执行的代码顺序混乱 并不会像同步执行的代码一样通俗易懂，（需要多看多练多思考）
     3.请求接口发送ajax，发送promise，或时间计时器等等，这些就是异步任务。
   

   • 通过下面代码举例

         // 同样的 它会在代码执行的时候会先创建一个匿名函数 anonymous
         // 同时在执行第一行代码的时候 会先把 console.log('start') 压入到执行栈中
         console.log('start')
         //在这里遇到了定时器将定时器放入到一步已有对于异步队列中等待同步执行完毕后下一轮队列执行 
         setTimeout(()=>{
           console.log('time1');
         },1000)
         // 执行时遇到函数声明跳过执行下面代码
         function foo(){
           console.log('foo');
           bar()
         }
         // 放入异步等待下一轮执行
         setTimeout(()=>{
           console.log('time2');
         },1500)
         //跳过函数声明
         function bar(){
           console.log('bar');
         }
         // 执行函数调用
         foo()
         //打印
         console.log('end');