浏览器的事件循环机制进阶理解

浏览器的事件循环机制

由来： js是单线程（一次只能进行一下操作）的语言，主要是用于页面和用户之间的交互，因为如果是多线程在渲染的时候是会出现问题的，比如同时对一个dom进行输入和删除的操作，此时就会产生冲突，但是单线程没有多线程处理方法的话，也会有问题，比如ajax请求数据/定时器/事件绑定等，此时一直在等待服务器返回数据界面，出现阻塞，用户的体验感也会不好，效率也会很低，因此就产生了一些单线程中的异步操作。

异步操作

• 主要包括定时器；事件绑定；ajax请求以及回调函数（不是很严谨的异步）

• es6提供了 promise 和 Generator（生成器） 以及 es7 的 async/await 解决异步的方法

  • 由来： 防止回调地狱的形成（回调地狱：在js中我们经常会大量使用异步回调，将一个函数作为参数传递给另个函数并且有许多 })结尾的符号，使得代码看起来很混乱）

  • Promise有三种状态：pending/reslove/reject 。pending 就是未决，resolve 可以理解为成功，reject 可以理解为拒绝。

    • Promise 常用的三种方法 then 表示异步成功执行后的数据状态变为 reslove ；catch 表示异步失败后执行的数据状态变为 reject； all表示把多个没有关系的 Promise 封装成一个Promise 对象使用 then 返回一个数组数据。

  • Generator（生成器）是一种有效利用内存的机制，一边循环一边计算生成数值的机制。通过配合Promise 可以更加优雅的写异步代码。

    • 构建一个生成器函数

      function *f() {
                     
      	let x = yield f1();      
      	console.log("ni hao")  
      }
      

      构建生成器非常简单只需要在函数方法名前面加一个 * 这个函数就是一个生成器函数，可能有人注意到函数体中有一个 yield 关键字（学过 python 应该知道），简单点说 yield 类似 return 也是返回值的，区别在于当程序 执行到 yield 后会返回 yield 后面的表达式，并且程序暂停在这里保存当前值状态，程序只是暂停在这里并没有中止。

    • 获取生成器的值

      var it = f();    
      it.next().value.then(data=>{
                  
      	console.log(data) ;
      })  
      console.log(123) ; 
      it.next() ; 
      console.log(it.next(