浅谈promise和js执行机制(二)

郜小超 等级 792 0 0

让我们继续上一次遗留的问题:

setTimeout(function(){
  console.log('1')
});
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
console.log('4');

最终的结果是2,4,3,1

不知道和大家预想的是否一样,那为什么是这种结果呢?我们今天一起来探讨一下!

在这段代码中既有setTimeout又有Promise,那究竟在js中是什么执行顺序呢?这其实就设计到了宏任务和微任务、同步任务和异步任务

同步任务: 指的是在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

异步任务: 指的是不进入主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。上述过程会不断重复,也就是常说的Event Loop(事件循环)。

浅谈promise和js执行机制(二)

1.所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)

2.主线程之外,还存在一个“任务队列”,只要异步任务有了运行结果,就在“任务队列”之中放置一个事件

3.一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待,进入执行栈,开始执行

4.主线程不断重复第3步

这位大佬讲的比我更详细我就不在这里赘述了 请移步[https://juejin.im/post/6844903512845860872]

收藏
评论区

相关推荐

浅谈promise和js执行机制(一)
作为一个入门级前端,今天是一个非常值得纪念的日子,因为这是我第一次在论坛上发表帖子,作为起步。虽然我觉得自己水平还是十分的有限,对一些细节的理解还不是很透彻,但是还是要迈出这一步,不管是给别的新手作为学习参考,还是自己以后回顾,总觉得需要把自己的成长记录下来,希望自己以后还是要多坚持,如果有不对的地方还是希望大家及时提出来,共同进步 今天有时间翻到了
浅谈promise和js执行机制(二)
让我们继续上一次遗留的问题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); conso
js异步的5种样式
js异步的5种样式 1.定时器 2.AJAX 3.Promise 4.Generator 5.asyns和awite  1.定时器     setTimeout() : 延时器        可以传入三个分别是            1)code:必
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
盘点JavaScript中async/await知识
大家好,我是进阶学习者。一、前言Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。 二、Async function让以 async 这个关键字开始。它可以被放置在一个函数前面。如下所示:async function f() return 1;在函数前面的 “async” 这个单词表达了一个简单的
Dart HttpServer 学习
import 'dart:io'; void main() { var port = 4049; //这个跟 JS的Promise 类似 HttpServer.bind(InternetAddress.anyIPv6, port).then((HttpServer server) { //监听端口成功 //不是太懂为什么这个函
ES6 Promise 对象扯谈
new Promise( /* executor */ function(resolve, reject) { ... } ); Promise的构造函数接收一个函数作为参数,函数里面传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来
ES6中的Promise和Generator详解
简介 == ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性。 Promise ======= 什么是Promise ---------- Promise 是异步编程的一种解决方案,比传统的解决方案“回调函数和事件”更合理和更强大。 所谓P
JS MarcoTasks MicroTasks
##JS MarcoTasks MicroTasks 在JS的`event loop`中,有两种任务队列`microtasks`和`macrotasks` **microtasks** * process.nextTick * Promise * Object.observe * MutationObserver **macrotas
JavaScript中Promise 使用、原理以及实现过程
#### 1.什么是 Promise promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。 #### 2.Promise 原理简析 (1)promise 本身相当于一个状态机,拥有三种状态 * pending * fulfilled * rejected 一个 promise 对象初始化时
Javascript 中的神器——Promise
_摘要:_ 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 Promise概念 --------- 所谓 Promise,就是ES6原生提供的一个
Promise和Observable的映射
前言 -- 1. promise解决了嵌套地狱的问题,Observable解决了promise只有一个结果,和不可以取消的问题。 2. 使用的是rxjs6版本。 3. 这篇文章是方便使用Observable的API替换Promise的API。 ### 正常用法 promise .then(result => {}) .ca
Promise的奇怪用法和自己实现一个Promise
原文链接: [Promise的奇怪用法和自己实现一个Promise](https://my.oschina.net/ahaoboy/blog/4645165) 使用Promise实现一个页面所有图片加载完毕的回调 import React, { useEffect } from "react"; export default () =>
Promise进一步阅读
下面是几篇比较好的Promise文章: \[1\] Promise是怎么工作的, [http://wengeezhang.com/?p=13](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwengeezhang.com%2F%3Fp%3D13) \[2\] JavaScript进阶之路
TypeScript `infer` 关键字
<table class="d-block"> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p>考察如下类型:</p> <div class="highlight highlight