1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js中的事件循环和宏任务和微任务的理解

js中的事件循环和宏任务和微任务的理解

时间:2021-02-06 06:53:58

相关推荐

js中的事件循环和宏任务和微任务的理解

参考许多大神的文章,写下自己的理解

事件循环:

说到事件循环就得谈到js中同步和异步的执行顺序

1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册。

2.当异步任务满足触发条件的时候,异步任务的回调函数会被放入事件队列中。

3.然后当主线程的同步任务都执行完毕,系统就会去事件队列中读取异步的回调函数。

例如这段代码:

// 同步任务 打印 firstconsole.log("1");setTimeout(() => {// 异步任务 回调函数放入事件队列,当主线程的同步任务都执行完毕打印console.log("2");},0)// 同步任务 打印lastconsole.log("3");//所以打印结果1 3 2

常见异步任务

1.DOM事件

2.AJAX请求

3.定时器setTimeout和setlnterval

4.ES6的Promise(Promise定义部分为同步任务,回调.then部分为异步任务)

例如这段代码:

setTimeout(() => {console.log(1);}, 0)new Promise(function(resolve){console.log(2);for(var i = 0; i < 10000; i++){i == 99 && resolve();}}).then(function(){console.log(3)});console.log(4)//按照上面的操作:可以很轻松得出案例的打印结果:2,4,1,3

可是结果却是2 4 3 1,那么也就意味着,JavaScript的异步任务是存在优先级的。

JavaScript除了广义上将任务划分为同步任务和异步任务,还对异步任务进行了更精细的划分。异步任务又进一步分为微任务和宏任务。宏任务和微任务分别有各自的任务队列即宏任务队列和微任务队列。例如下面这张图:

可以看到宏任务有script,定时器,ajax,history traversal i/o,微任务有promise.then,process.nextTick,MutationObserver,Object,observer

history traversal任务(h5当中的历史操作)

process.nextTick(nodejs中的一个异步操作)

MutationObserver(h5里面增加的,用来监听DOM节点变化的)

下面是执行顺序:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。