异步编程&事件循环event loops

js的执行环境是单线程的(一次只能完成一个任务),好处简单,坏处耗时长容易卡死。

异步:是一个关于现在和将来的问题,现在执行的代码和将来执行的代码。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。

下面代码如果同步,打印a的值是确认的;但是如果异步,a有两种可能(看哪个请求先回来)

异步编程的方法有:回调函数callback,事件监听,观察者—发布/订阅模式,Promise,Generator函数,async/await

回调函数CALLBACK

假设有两种函数f1,f2。f2等待f1的结果,考虑把f2写成f1的回调f1(f2)

回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合,流程会很混乱,而且每个任务只能指定一个回调函数。

事件监听

还是以f1,f2为例子

f1.on('done', f2);

这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以”去耦合”,有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

观察者—发布/订阅模式

事件监听可以理解为信号,有一个信号中心,f1执行完就像信号中心发布一个信号,f2等其他任务可像信号中心订阅信号以知道自己什么时候可以开始执行。

相当于f1执行完后,发出done信号,从而f2再执行。

这种方法的性质与”事件监听”类似,但是明显优于后者。因为我们可以通过查看”消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

PROMISE对象

是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。

它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。

eg1:f1的回调函数f2,可以写成:

f1().then(f2);

eg2:指定多个回调函数

f1().then(f2).then(f3);

eg3:指定发生错误时的回调函数

f1().then(f2).fail(f3);

这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。

如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难.

GENERATOR函数

语法:

方法:

ASYNC异步/AWAIT等待

async 写在函数开头,代表异步,async和await一起使用,但是不一定非要有await,有await代表执行暂停

当 async函数抛出异常时,Promise 的 reject方法将处理这个异常值。

async 函数中可能会有 await 表达式,这将会使 async 函数暂停执行,等待 Promise 正常解决后继续执行 async 函数并返回解决结果。

async/awawit的简单使用.

事件循环EVENT LOOPS

循序大致都是先整体js,然后微任务(遇见宏任务task先做保留放在队列中-排队,不输出),宏任务 。

简单插件asyncHelper,可以帮助我们异步的插入task和microtask。

常见的task(宏任务)任务源:

1.DOM 操作任务源:如元素以非阻塞方式插入文档

2.用户交互任务源:如鼠标键盘事件。用户输入事件(如 click) 必须使用 task 队列

3.网络任务源:如 XHR 回调

4.history 回溯任务源:使用 history.back() 或者类似 API

5.事件回调

6.XHR 回调

7.IndexDB 数据库操作等 I/O

8.setTimeout / setInterval

9.history.back

常见的microtask(微任务)任务源:

1.Promise.then

2.MutationObserver

3.Object.

1每个 eventloop 由三个阶段构成:执行一个 task,执行 microtask 队列,可选的 ui render 阶段,requestAnimationFrame callback 在 render 阶段执行。我们平时写的逻辑代码会被分类为不同的 task 和 microtask。

2.microtask 中注册的 microtask 事件会直接加入到当前 microtask 队列。

3.microtask 执行时机『尽可能早』,只要 javascript 执行栈为空,就会执行。一轮 eventloop 中,可能执行多次 microtask。

4.requestAnimationFrame callback 的执行时机与浏览器的 render 策略有关,是黑箱的

小结考题

这样一段代码怎么的输出顺序

宏任务,微任务你理解么?

```

console.log('1');

setTimeout(function() {

    console.log('2');

    process.nextTick(function() {

        console.log('3');

    })

    new Promise(function(resolve) {

        console.log('4');

        resolve();

    }).then(function() {

        console.log('5')

    })

})

process.nextTick(function() {

    console.log('6');

})

new Promise(function(resolve) {

    console.log('7');

    resolve();

}).then(function() {

    console.log('8')

})

setTimeout(function() {

    console.log('9');

    process.nextTick(function() {

        console.log('10');

    })

    new Promise(function(resolve) {

        console.log('11');

        resolve();

    }).then(function() {

        console.log('12')

    })

})

```

执行顺序:整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。

macro-task(宏任务):包括整体代码script,setTimeout,setInterval

micro-task(微任务):Promise,process.nextTick(callback)

参考文章

1.https://juejin.im/post/59e85eebf265da430d571f89

2.https://github.com/aooy/blog/issues/5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343