紫色个人网站模板,佛山建网站哪里好,男友给女朋友做网站,最好的优化公司排名在开始讲解之前#xff0c;我们先来看一段代码#xff1a;console各位小伙伴觉得上面的结果输出会是多少呢#xff1f;如果你没有了解过javascript的执行机制的话#xff0c;上面的题目可能会让你崩溃。不过别着急#xff0c;先往下看#xff0c;我保证你看到最后#x… 在开始讲解之前我们先来看一段代码console 各位小伙伴觉得上面的结果输出会是多少呢如果你没有了解过javascript的执行机制的话上面的题目可能会让你崩溃。 不过别着急先往下看我保证你看到最后能轻轻松松写出上面代码的答案并且完全了解其中的原理。 首先希望大家记住一个要点javascript是单线程的语言。 因此所有的javascript的异步特性都是基于单线程实现的记住了这个特点我们再去理解javascript的很多机制就容易很多了。 我们先从简单的代码说起来引出今天的概念。console 我想小伙伴们对上面结果都不会有疑问setTimeout是我们常用来做延迟执行的全局函数。它接受两个参数要执行的函数a和等待的秒数x函数a会在程序经过x秒后执行。 这里引出我们的第一个概念同步函数和异步函数。上面的函数a就是异步函数了它不是立刻执行的函数而是要等待一段时间或者说满足一定的条件之后才执行的函数。 不过有时候我们明明设置了3秒的定时但是却发现函数并没有在3秒后执行有时候会更久这又是为什么呢 这要从javascript的执行原理说起js执行的时候有一个专门存放异步函数的地方称之为Event Table而当异步函数已经满足回调的执行条件之后比如时间过了x秒异步请求返回了结果等等原本放在Event Table的异步函数就会被放进一个队列中这个队列称为Event Queue。 不要觉得这个队列很深奥其实就是一个排队里面放的都是回调函数它们正一个个等待着按顺序执行自身呢。来看下面的代码 从上面结果我们可以看出setTimeout并非是在setTimeout调用之后经过3秒就马上输出结果setTimeout执行啦~而是等待下方的sleep函数执行完毕后才输出的结果。 前面我已经说过要牢记javascript是单线程那么它就一次只能运行一个一段代码。 因此即使处于异步队列的setTimeout函数已经满足执行条件了但是它还是得等待在Event Queue中直到主线程执行完毕才能执行。 所以请记住js会先执行主线程的同步代码遇到setTimeout就将其回调函数注册在Event Table中然后当异步函数满足执行条件之后就会被放入Event Queue中但是并不能马上执行而是得等待主线程剩余代码执行完毕队列中的函数才能按顺序执行。 我想小伙伴们看到这里已经明白一点js的执行机制了那么我们一鼓作气继续深入一下其实也很简单Promise和process又是怎样的执行机制呢 在放代码之前我先介绍两个基本概念process.nextTick我们知道浏览器环境下的setTimeout那么process.nextTick就相当于在node环境下执行的setTimeout。宏任务和微任务主线程一直在执行script代码还有setTimeout、setInterval函数就是宏任务而Promise.then,process.nextTick则是微任务。 接下来我们看一段代码console emmm这里的结果是不是就有点微妙了。 记得我们刚才说的宏任务和微任务吗js的执行机制中先是执行完宏任务中的同步代码接着执行微任务接着执行宏任务的异步代码。这样说可能有点绕我们结合上面的代码来看。代码一开始执行执行的就是全局代码也就是宏任务的同步代码遇到console.log直接执行输出程序执行开始~接着执行遇到setTimeout函数将其回调函数注册进宏任务的Event Queue(注意宏任务和微任务分别有自己的Event Queue)接着遇到new Promise立刻执行new Promise里面的函数是立刻执行的只有.then函数里面才是放到微任务去执行的不要搞混咯~输出promise开始执行~接着遇到promise.then函数将其回调函数注册到微任务的Event Queue接着继续执行遇到console.log直接输出程序执行结束~到这里宏任务的同步代码就全部执行完毕了这时候js引擎会去检查微任务的Event Queue中是否存在回调函数这时微任务的Queue中还有一个函数未执行因此在这时候执行输出promise执行结束~当微任务的所有回调函数被执行完了之后一次事件循环就结束了。这时候js引擎会检查宏任务的Event Queue中是否还有未执行的函数如果还有将会开启下一轮的事件循环。由于此时我们宏任务的Event Queue中还有未执行的setTimeout所以开启下一轮事件循环执行setTimeout回调输出setTimeout执行啦~ 能坚持到这里的小伙伴相信你已经学到了不少给自己点个赞吧 接下来我们再来看一下加上process.nextTick之后的一个例子console 是不是有一点一开始那块代码的味道了上面的输出结果也很容易理解先是执行了同步代码输出1 3 6 9然后输出微任务中的process.nextTick的回调5 8然后输出Promise.then中的回调4 7最后输出setTimeout的2是不是一目了然。 上面唯一要注意点的就是process.nextTick是要比Promise.then先执行的也许不同node版本环境下不同这个要看具体执行结果。 好啦终于这篇文章也要接近尾声了还在看的小伙伴再给自己点个赞吧当然也可以给我点个赞~你每一个小小的支持都是我坚持下去的最大动力。 接下来要进入最后的重头戏按照我们前面所讲的知识分析刚开始的代码的执行结果。这里再贴下一开始的代码最终结果我会在文章最后再贴出来所以小伙伴们也可以自己先看下最后比对结果是否和文中的一致。console 接下来是分析过程程序开始执行宏任务同步代码遇到console.log输出1遇到setTimeout1将其放入宏任务Event Queue中;遇到process.nextTick1放入微任务Event Queue中遇到new Promise直接执行其中的代码输出7;遇到Promise.then1函数将其放入微任务Event Queue;继续执行遇到setTimeout2放入宏任务Event Queue此时任务队列状态宏Queue: setTimeout1setTimeout2;微Queue: process.nextTick1、Promise.then1至此宏任务同步代码执行完毕检测微任务队列是否存在任务由于存在两个微任务所以这时候执行微任务先执行process.nextTick1输出6;接着执行Promise.then1输出: 8;微任务执行完毕后一次事件循环结束js引擎持续检测宏任务中是否存在任务存在的话开启下一次事件循环由于存在两个setTimeout所以在满足setTimeout执行条件后开启下一次事件循环执行回调函数先执行setTimeout1遇到console.log输出2;接着遇到process.nextTick2放入微任务Event Queue继续执行遇到new Promise直接执行输出4;然后遇到Promise.then2放入微任务Event Queue;至此setTimeout1执行完毕此时任务队列状态宏Queue: setTimeout2;微Queue: process.nextTick2、Promise.then2js引擎检查微任务Event Queue中还存在两个微任务因此执行这两个微任务先执行process.nextTick2输出3;接着执行Promise.then2输出5;微任务执行完毕第二次事件循环结束js引擎持续检查宏任务Event Queue中是否还有未执行函数检测到还有setTimeout2未执行因此开启第三轮的事件循环执行setTimeout2遇到console.log输出9;又遇到process.nextTick3放入微任务队列遇到new Promise直接执行输出11;遇到Promise.then3放入微任务队列至此setTimeout2执行完毕此时任务队列状态宏Queue: 无;微Queue: process.nextTick3、Promise.then3js引擎在检测是否存在未执行的微任务由于还有两个微任务未执行因此将其执行先执行process.nextTick3输出10;接着执行Promise.then3输出12;至此微任务执行完毕事件循环结束 最后程序输出结果1 7 6 8 2 4 3 5 9 11 10 12 看到这里的小伙伴们给自己点第三个赞吧。 怎么样是不是觉得已经完全掌握了js的执行机制其实宏任务和微任务除了上文提到的那些还有一些其他的可以下来自己再去了解下~ 最后感谢大家的阅读如果觉得文章写的还可以的话可以给我点个赞、点个关注、或者直接关注本人我会持续分享更多优质的技术文章我们一起加油吧
