js的异步执行操作顺序学习

1. js中同步异步任务的顺序

首先,我们可以确定js是一门单线程的语言,即能够执行任务的道路只有一条,而这条道路上面改执行怎样的任务,就需要有一个顺序来区分.
js的任务用大的分类可分为同步任务和异步任务,
同步任务:即排队等待,从上往下执行,只有前面的任务完成后,你才能开始任务
异步任务:如果js只有同步的过程,那么意味着,只要有一个任务卡死了,那么你后面的任务都阻塞了,所以异步处理就有了必要性.js的异步处理是通过事件循环实现的(event loop).
一般情况下是同步任务执行完成后才开始执行异步任务

按照这种分类方式:JS的执行机制是

首先判断js代码是同步还是异步,同步就进入主进程,异步就进入event table
异步任务在event table中注册函数,当满足触发条件后,被推入event queue
同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
以上三步循环执行,这就是event loop

1.1 js异步任务的顺序理解

将js加载执行任务顺序再进一步的划分的话,就必须弄清楚异步任务的执行顺序
异步任务的执行主要是会分为宏任务和微任务
宏任务: setTimeout setInterval setImmediate等甚至还有script
微任务: Promise.then Promise.catch等

一般来说,一段代码函数的执行,便是主线程的一个任务的开始,当任务执行遇到setTimeout等宏任务时,便将宏任务放到宏任务的队列中,遇到微任务,则将其丢到微任务队列中,等主线程任务中执行完成后,再开始判断两个队列的执行顺序.
一开始对比队列时,只要有微任务,优先微任务队列,微任务队列完成后,再开始执行宏任务.
每次宏任务执行完一个后便会检查微任务队列,微任务队列如果有任务,则会优先执行微任务队列的任务,直到目前微任务队列执行完成后,再执行下一宏任务.

语言表述往往比较抽象,举一个实际例子:

(function() {
    setTimeout(() => {
        console.log(0);
    });
    new Promise(resolve => {
        console.log(1);
        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });
        Promise.resolve().then(() => console.log(5));
    }).then(() => {
        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));
    });
    console.log(9);
})();

首先先说结果:

1 ,9 ,5 ,0 ,6 ,2 ,7 ,4 ,8 ,3

这个结果的过程需要细说一下,首先执行的是function的主函数,遇到第一个

setTimeout(() => {
        console.log(0);
    });

放到宏任务队列里面去,然后遇到Promise,

 new Promise(resolve => {
        console.log(1);
        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });
        Promise.resolve().then(() => console.log(5));
    })

由于Promise优先级较高,而且是new promise 会立即执行所以直接执行输出1,再然后遇到setTimeout函数

 setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });

,再将其丢到宏任务队列里面去,再往下执行,遇到Promise.then函数

Promise.resolve().then(() => console.log(5));

将其丢到微任务队列中,然后回到主线程,执行console.log(9), 输出9,执行完成后即该任务完成,然后查看两个任务队列,发现微任务队列有任务,所以执行微任务

Promise.resolve().then(() => console.log(5));

输出5,微任务执行完成后,没有后续微任务了,则开始执行宏任务

setTimeout(() => {
        console.log(0);
    });

输出0
宏任务执行完成后,回头一瞅,发现还是没有微任务,则继续执行宏任务

 setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });

这个宏任务一进去,看到了resolve,好巧,直接把.then

  }).then(() => {
        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));
    });

丢到微任务,再执行,又看到了一个Promise.then

     Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });

巧了,前面兄弟和你一样,再微任务队列走起,然后宏任务完成,再开始看两个队列,一看,里面微任务里面有两个任务,宏任务都不用看了,先干完微任务再说,第一个微任务

 }).then(() => {
        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));
    });

直接先输出6,然后把Promise.then

  Promise.resolve().then(() => console.log(7));

丢到微任务里去,又一个setTimeout

setTimeout(() => console.log(8));

宏任务走起,然后这个微任务完了,下一个微任务

     Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });

老规矩,直接输出2,setTimeout 3丢宏任务,Promise,then 4丢微任务,在执行下一个微任务

  Promise.resolve().then(() => console.log(7));

输出7,再看看微任务还有吗,刚刚又来了个

 Promise.resolve().then(() => console.log(4));

输出4,然后微任务没了,终于可以开始宏任务了,然后宏任务2连

setTimeout(() => console.log(8));

 setTimeout(() => console.log(3));

输出8 ,3

Prefect! 虽然这个文本差点把自己绕进去了,最好旁边用个纸记一下两个队列发生了啥比较好理解.
这些差不多就是宏微任务的顺序了,基本在微任务面前,宏任务就先靠边.
new promise 会立即执行
then会分发到微任务
遇到 console 立即执行


在这里插入图片描述

其实还有process.nextTick等微任务,他的优先级比Promise还高.在队列中同样的函数还可以顺序执行,但不同的函数有时候还要判断优先级,执行顺序会更加复杂.

来个复杂例子发散下思维

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

ok 第一篇文章完成

更新补充

实际上,还有一个异步任务那就是async和await,顺序执行是遇到await就会立即执行,类似于new一个promise,但是如果在await函数执行过程中被打断比如遇到另一个await函数,则当前await的后续代码会阻塞,直到执行微任务队列之前会继续执行完成.

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout1');
}, 200);
setTimeout(function () {
    console.log('setTimeout2');
    new Promise(function (resolve) {
        resolve();
    }).then(function () {
        console.log('then1')
    })
    new Promise(function (resolve) {
        console.log('Promise1');
        resolve();
    }).then(function () {
        console.log('then2')
    })
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise2');
    resolve();
}).then(function () {
    console.log('then3');
});
console.log('script end');
//结果
script start
async1 start
async2
promise2
script end
async1 end
then3
setTimeout2
Promise1
then1
then2
setTimeout1
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342