js同步任务和异步任务的执行顺序

时间:2023-01-12 08:35:31

先来道今日头条面试题开开胃

async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
/**
 * scripr start
 * async1 start
 * async2
 * promise1
 * scroptend
 * async1end
 * promise2
 * setimeout
 */

执行结果是不是和你想的有些不同?下面是我查阅资料后总结的同步任务和异步任务的执行顺序

1、不管是同步还是异步,js都会按顺序执行,只是不等待异步的执行结果而已(并不是遇到异步的就绕过不执行,别蒙了)

2、同步的任务没有优先级之分,异步执行有优先级,先执行微任务(microtask队列),再执行宏任务(macrotask队列),同级别按顺序执行

  微任务: `process.nextTick` ,`promise` ,`MutationObserver`

  宏任务:`script` , `setTimeout` ,`setInterval` ,`setImmediate` ,`I/O` ,`UI rendering`

3、await表示让出线程,继续执行后面的函数(执行当前函数后面的函数,不是当前函数里面的)

js同步任务和异步任务的执行顺序的更多相关文章

  1. 「JavaScript」同步、异步、回调执行顺序之经典闭包setTimeout分析

    聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...

  2. 同步、异步、回调执行顺序之经典闭包setTimeout分析

    聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...

  3. 详解Ajax请求(四)——多个异步请求的执行顺序

    首先提出一个问题:点击页面上一个按钮发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 答案是:不会,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻 ...

  4. promise、async、await、settimeout异步原理与执行顺序

    一道经典的前端笔试题,你能一眼写出他们的执行结果吗? async function async1() { console.log("async1 start"); await as ...

  5. js在html中的加载执行顺序

    1.加载顺序:引入标记<script />的出现顺序,依次加载 页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记< ...

  6. js函数和变量的声明与执行顺序

    一.函数执行顺序 1.正常顺序 function f(){ alert(2); } f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 f(); //alert 2 function ...

  7. node&period;js同步读取与异步读取文件

  8. CountDownLatch同步工具--控制多个线程执行顺序

    好像倒计时计数器,调用CountDownLatch对象的countDown方法就将计数器减1,当到达0时,所有等待者就开始执行. java.util.concurrent.CountDownLatch ...

  9. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

随机推荐

  1. ajax response status list &lbrack;转载&rsqb;

    比较理想的解释方法应该以"状态:任务(目标)+过程+表现(或特征)"的表达模式来对这几个状态进行定义  [全文]  在<Pragmatic Ajax A Web 2.0 Pr ...

  2. webmagic的设计机制及原理-如何开发一个Java爬虫

    之前就有网友在博客里留言,觉得webmagic的实现比较有意思,想要借此研究一下爬虫.最近终于集中精力,花了三天时间,终于写完了这篇文章.之前垂直爬虫写了一年多,webmagic框架写了一个多月,这方 ...

  3. fprintf&comma; fscanf&comma;printf&comma;scanf使用时参数注意

    在利用fprintf函数将数据按格式输出到文件中时,通常需要限定数据的格式,例如: FILE *f=fopen("d:\\1.txt","w+"); int a ...

  4. 日常工作生活中的做人做事道理&lbrack;持续更新ing&rsqb;

    1.凡是预则立,不预则废 2.不能用特殊案例说明事情本身的发展规律 3.任务不能拖,需主动出击,想方设法完成 4.工作要有细致化的沟通和安排 5.解决问题和安排任务可以逆向思维的去想 6.问题要举一反 ...

  5. 关于cocos2d和cocos2dx,还有iOS上的cocos2d的ARC问题

    好吧,我承认这个我花了N个小时所做的努力都白费了. 事情的开始是这样的,今天在写cocos2dx的时候,测试发现总是出现溢出的问题,总是在main.m的autorelease报错.(好吧,如果我以后发 ...

  6. 在IE浏览器中url传参长度问题

    1.在这之前我一直以为,应该说是并没有去思考过,url地址传参的长度限制问题:知道在项目材料价格系统中遇到之后,才对这个问题进行了具体的探索.IE中最大的长度限制为2084个,用于get传递数据的长度 ...

  7. GetPJData - uGetHttpData&period;pas

    function GetPJData(APage: Integer): string; var IdHTTP: TIdHTTP; url: string; paramsList: TStringLis ...

  8. SpringBoot事务管理

    1.在UserMapper接口中添加更新和删除方法 package com.cppdy.mapper; import org.apache.ibatis.annotations.Delete; imp ...

  9. kafka的一些参数

    参考文档: https://blog.csdn.net/fengzheku/article/details/50585972 http://kafka.apache.org/documentation ...

  10. mybatis 之 parameterType&equals;&quot&semi;List&quot&semi; 2

    <select id="queryGoodsByGoodsNoPcweb" parameterType="List" resultMap="si ...