JavaScript从初级往高级走系列————异步

原创 Bios 随笔 js 55阅读 17 天前 举报

原文博客地址:https://finget.github.io/2018/05/21/async/

异步

  • 什么是单线程,和异步有什么关系
  • 什么是event-loop
  • 是否用过jQuery的Deferred
  • Promise的基本使用和原理
  • 介绍一下async/await(和Promise的区别、联系)
  • 异步解决方案

什么是单线程,和异步有什么关系

单线程-只有一个线程,只做一件事。JS之所以是单线程,取决于它的实际使用,例如JS不可能同添加一个DOM和删除这个DOM,所以它只能是单线程的。

上面这个例子中,当执行了alert(1),如果用户不点击确定按钮,console.log(2)是不会执行的。

为了利用多核CPU的计算能力,HTML5提出WebWorker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

js异步

event-loop

event-loop

文字解释

  • 事件轮询,JS实现异步的具体解决方案
  • 同步代码,直接执行
  • 异步函数先放在异步队列中
  • 待同步函数执行完毕,轮询执行 异步队列 的函数

上面那个例子的执行效果就是这样的:

实例分析:

这个例子中有两种情况,取决于ajax的返回时间,如果ajax时间小于100ms它就先放进异步队列

Jquery Deferred

Jquery1.5前后的变化

  • 无法改变JS异步和单线程的本质
  • 只能从写法上杜绝callback这种形式
  • 它是一种语法糖形式,但是解耦了代码
  • 很好的体现:开放封闭原则(对扩展开放,对修改封闭)

使用Jquery Deferred

新增需求:要在执行完成之后进行某些特别复杂的操作,代码可能会很多,而且分好几个步骤

当执行dtd.reject()时:

上面封装的waitHandle方法,由于直接返回了dtd(deferred对象),所以用户可以直接调用w.reject()方法,导致无论是成功还是失败,最后都走失败。

ES6的Promise:点这里

async/await

这是ES7提案中的,现在babel已经开始支持了,koa也是用async/await实现的。

  • then 只是将callback拆分了
  • async/await 是最直接的同步写法

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复