我赢网seo优化网站,织梦学校网站源码,wordpress实现圈子功能,seo站长助手喜欢排队吧#xff0c;它能保护你的时间和精力 - 排队纪律维护员Event LoopPromise和事件循环概览图请注意上面这张图#xff0c;Promise和事件循环的那些事#xff0c;将在这个图上缓缓展开。微任务和(宏)任务好了#xff0c;(经过上一节对Promise的理解)现在我们对如何创…喜欢排队吧它能保护你的时间和精力 - 排队纪律维护员Event LoopPromise和事件循环概览图请注意上面这张图Promise和事件循环的那些事将在这个图上缓缓展开。微任务和(宏)任务好了(经过上一节对Promise的理解)现在我们对如何创建Promise以及如何从Promise中获取值多了一些了解。让我们在script中添加更多的代码然后再次运行它等等发生了什么首先输出了Start!。好吧显而易见的console.log(Start!) 就在第一行但是输出的第二个值是End而不是Promise的值只有在End输出后Promise的值才被输出。这是怎么回事我们终于见识到Promise的真正力量虽然JavaScript是单线程的但是我们可以使用Promise添加异步行为但是稍等一下我们以前不是见过了吗在JavaScript事件循环中(「翻译」JavaScript的可视化学习之一事件循环)我们不也可以使用浏览器的本地方法(如setTimeout)来创建某种异步行为吗没错但是在事件循环中实际上有两种类型的队列(宏)任务队列(或简称为任务队列)(macro) task queue 和微任务队列microtask queue。(宏)任务队列用于(宏)任务微任务队列用于微任务。那么什么是(宏)任务什么是微任务呢下面表格罗列了一些最常用的(Macro)task setTimeout setIntervalsetImmediateMicrotaskprocess.nextTick Promise callbackqueueMicrotask啊我们在微任务列表中看到了Promise当Promise处理并调用其then()、catch()或finally()方法时该方法内的回调将添加到微任务队列中这意味着then()、catch()或finally()方法中的回调不会立即执行这实际上是在我们的JavaScript代码中添加了一些异步行为那么then()、catch()或finally()回调函数在什么时候执行呢事件循环为任务设定了不同的优先级1、当前在调用堆栈中的所有函数被执行当它们返回一个值时它们将从堆栈中弹出。2、当调用堆栈为空时所有排队的微任务将一个接一个的弹出到调用堆栈中并执行(微任务本身也可以返回新的微任务实际创建了一个无限的微任务循环)3、如果调用堆栈和微任务队列都为空则事件循环将检查(宏)任务队列中是否还有任务。如果有任务被弹出到调用堆栈执行然后弹出调用堆栈让我们看一个简单的例子简单地使用Task1: 一个立即添加到调用堆栈中的函数例如在代码中立即调用它。Task2, Task3, Task4: 微任务例如一个Promise的then回调或使用queueMicrotask添加的任务。Task5, Task6: (宏)任务例如setTimeout或setImmediate回调。首先Task1返回一个值并从调用堆栈中弹出。然后引擎检查微任务队列中排队的任务。一旦所有任务都被放入调用堆栈并最终弹出引擎将检查(宏)任务队列中的任务任务将弹出到调用堆栈中并在它们返回值时弹出。好吧好吧粉色盒子够多了。让我们用一些真正的代码来使用它console.log(Start!)setTimeout(() {console.log(Timeout!)}, 0)Promise.resolve(Promise).then(res console.log(res))console.log(End!)在这段代码中我们有宏任务setTimeout和微任务Promise的 then()回调。定位到setTimeout函数的行让我们一步一步地运行这段代码看看会输出了什么小提示 - 在下面的示例中我展示了如下方法console.logsetTimeout和Promise.resolve他们被添加到调用堆栈中。它们是内部方法实际上不会出现在堆栈跟踪中 — 因此如果您正在使用调试器并且在任何地方都看不到它们请不要担心这么做只是为了让解释这个概念更容易而不需要添加一堆示例代码。在第一行引擎遇到console.log()方法。它被添加到调用堆栈中然后输出Start到控制台。方法从调用堆栈中弹出引擎继续运行。引擎遇到setTimeout方法该方法被弹出到调用堆栈中。setTimeout方法是浏览器的本地方法它的回调函数(() console.log(In timeout)) 将被添加到Web API中直到计时器完成。虽然我们为计时器提供了值 0但是回调仍然会首先被推送到Web API之后它会被添加到(宏)任务队列中setTimeout是一个宏任务引擎遇到Promise.resolve()方法。这个Promise.resolve()方法被添加到调用堆栈中之后处理并返回Promise。然后它的then回调函数被添加到微任务队列中。引擎遇到console.log()方法。它会立即添加到调用堆栈中然后输出End到控制台从调用堆栈中弹出引擎继续运行。引擎发现调用堆栈现在是空的。由于调用堆栈是空的它将检查微任务队列中是否有排队的任务是的Promise的then回调正在等待它被弹出到调用堆栈中然后输出Promise的值在这里是字符串promise。引擎发现调用堆栈是空的因此它将再次检查微任务队列以查看是否有排队的任务。不微任务队列都是空的。是时候检查(宏)任务队列了setTimeout回调仍在那里等待setTimeout回调被弹出到调用堆栈。回调函数返回console.log方法该方法输出字符串“In timeout”。setTimeout回调从调用堆栈中弹出。终于一切都完成了现在看来我们之前看到的输出结果并不是那么出乎意料。翻译来源https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
