首页 > 其他分享 >【js】setTimeout、Promise、Async/Await 的区别

【js】setTimeout、Promise、Async/Await 的区别

时间:2023-04-14 16:55:11浏览次数:50  
标签:resolve console log script Await js Promise setTimeout

三者在事件循环中的是不同的,事件循环中分为宏任务队列和微任务队列

 

  • 其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行;
  • promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行;
  • async函数表示函数里面可能会有异步方法,await后面跟一个表达式,async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

setTimeout

console.log('script start') //1. 打印 script start

setTimeout(function() {
    console.log('settimeout') // 4. 打印 settimeout
}) // 2. 调用 setTimeout 函数,并定义其完成后执行的回调函数

console.log('script end') //3. 打印 script start

// 输出顺序:
// ->script start
// ->script end
// ->settimeout

Promise

Promise本身是同步的立即执行函数,

当在executor中执行resolve或者reject的时候,

此时是异步操作,

会先执行then/catch等,

当主栈完成后,才会去调用resolve/reject中存放的方法执行,

打印p的时候,是打印的返回结果,一个Promise实例。

console.log('script start')
let promise1 = new Promise(function(resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function() {
    console.log('promise2')
})
setTimeout(function() {
    console.log('settimeout')
})
console.log('script end')

// 输出顺序: 
// ->script start
// ->promise1
// ->promise1 end
// ->script end
// ->promise2
// ->settimeout

当JS主线程执行到Promise对象时,

  • promise1. then() 的回调就是一个 task
  • promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue
  • promise1 是 pending: 这个 task 就会放入 事件循环的未来的某个(可能下一个)回合的 microtask queue 中
  • setTimeout 的回调也是个 task ,它会被放入 macrotask queue 即使是 0ms 的情况

async/await

async 函数返回一个 Promise 对象,当函数执行的时候,
一旦遇到 await 就会先返回,
等到触发的异步操作完成,再执行函数体内后面的语句。
可以理解为,是让出了线程,跳出了 async 函数体。

async function async1() {
    console.log('async1 start');

    await async2();
    console.log('async1 end')

}
async function async2() {

    console.log('async2')

}

console.log('script start');
async1();
console.log('script end')

// 输出顺序:

// ->script start
// ->async1 start
// ->async2
// ->script end
// ->async1 end

 拓展:

// 面试题 
Promise.resolve().then(()=>{
    console.log('Promise1');
    setTimeout(()=>{
        console.log('setTimeout2')
    },0)
})
setTimeout(()=>{
    console.log('setTimeout1')
    Promise.resolve().then(()=>{
        console.log('Promise2')
    })
})
// Promise1 setTimeout1 Promise2 setTimeout2

 

let p = Promise.resolve().then(() => {
    console.log(p);
    const timer2 = setTimeout(() => {
        console.log('timer2')
    }, 0)
});
const timer1 = setTimeout(() => {
    console.log('timer1')
    Promise.resolve().then(() => {
        console.log('promise2')
    })
}, 0)
console.log('start');

代码运行步骤:
1、遇到Promise.resolve().then作为微任务,加入到微任务队列
2、timer1是宏任务,加入到宏任务队列
3、console.log同步代码,输出`start`,主线程中同步任务执行完。
4、微任务队列中有Promise.resolve().then,输出p,因为此时p没有resolve(),以及reject()终止掉,因此会输出`pending`。
4、timer2是宏任务,加入到宏任务队列,此时宏任务队列中有timer1、timer2。
5、微任务执行结束,进入到下一轮宏任务阶段。运行timer1,输出`timer1`,Promise.resolve().then是微任务。
6、宏任务结束,运行微任务,输出`promise2`。
7、微任务运行结束。此时宏任务队列中还有timer2,因此输出`timer2`

 相关资料:

 

标签:resolve,console,log,script,Await,js,Promise,setTimeout
From: https://www.cnblogs.com/websmile/p/17203940.html

相关文章

  • fastjson 1.2.24 反序列化漏洞(审计分析)
    环境JDK8u181Fastjson1.2.24POC跟进parse方法跟进到底层deserialze方法Poc中传入的dataSourceName:ldap://192.168.3.229:8084/vnSYPYwMs值这里实际对应setDataSourceName方法,调用此方法并传入ldap跟进setDataSourceName方法,这里只是简单赋值 步出......
  • jmeter接口关联,json提取器多个变量提取
    正则表达式提示单个变量 调用${boxTypeId}json提取器多变量提取  调用 请求数据  响应结果  ......
  • vue通过Export2Excel.js进行导入excel,获取数据
    <!--封装的模板下载和导入按钮和功能组件--><template><spanstyle="margin-left:10px"><el-buttonsize="mini"class="el-icon-download"@click="downFiles">下载模板</el-button><el-upload......
  • nodejs笔记
    node本质-跨平台js运行环境nodejs作用开发服务器应用(运行在服务器上)开发工具类应用(Webpack,Vite,Babel)开发桌面端应用(Vscode,postman)补充知识:nodexxx文件名可以运行文件nodejs中不能使用Dom和Bom的API,可以使用console和定时器APInodejs中顶级对象为global,也可以用g......
  • JavaScript 之 JSON [4] parse()和stringify() -JSON字符串和JavaScript对象数据之间
    JavaScript之JSON[4]parse()和stringify()-JSON字符串和JavaScript对象数据之间的相互转换1、JSON.parse()JSON.parse()方法用于将一个JSON字符串解析为一个JavaScript对象。JSON字符串必须使用双引号包括属性名和字符串值,不能使用单引号或无引号。语法:JSON.parse(text,r......
  • js 查找字符串中指定字符 模糊查询 不区分大小写
    varstr="helloworld!hellocoder!";//查找‘HELLO’是否存在,找不到返回nullvarreg=newRegExp('HELLO','i');varisHas=str.match(reg);console.log(isHas);//打印结果:["hello",index:0,input:"hellow......
  • Three.js教程:鼠标操作三维场景
    推荐:将NSDT场景编辑器加入你3D工具链其他工具系列:NSDT简石数字孪生为了使用鼠标操作三维场景,可以借助three.js众多控件之一OrbitControls.js,可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls)。然后和引入three.js文件一样在html文件中引入控件Orb......
  • JSP上传大型视频文件到服务器,解决方案
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式:post(get方式提交有大小限制,post没有)2.表单的enctype属性:必须设置为multipart/form-data.3.表单必须......
  • HTML、JS与PHP之间的数据传输
    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请求对应PHP的api接口,PHP在接收到数据后对连接服务器,服务器再通过PHP中的SQL语句对数据库关键字......
  • Tomcat 5.5部署jsp项目—jsp乱码问题的解决
    1、最基本的乱码问题。这个乱码问题是最简单的乱码问题。一般新会出现。就是页面编码不一致导致的乱码。<%@pagelanguage="java"pageEncoding="UTF-8"%><%@pagecontentType="text/html;charset=iso8859-1"%><html><head><title>中文问题</title><......