80%的前端开发都答不上来的js异步面试题

最新推荐文章于 2023-02-08 15:44:35 发布

loveX001

最新推荐文章于 2023-02-08 15:44:35 发布

阅读量522

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/loveX001/article/details/127644741

版权

本文通过一道面试题深入探讨JavaScript的宏任务和微任务执行顺序，详细解释了宏任务（包括setTimeout）和微任务（如Promise、async/await）的执行机制，帮助开发者理解JS异步操作的底层原理。

摘要由CSDN通过智能技术生成

最近面试中碰到了一道关于JS执行顺序的题目，题目比较基础，但是如果对于JS不熟的话，还是容易答不上来。再次记录和分析此次面试题，希望对大家有所帮助。

    async function async1() {
   
    console.log("async1 start");
    await async2();
    console.log("async1 end");
    }
    async function async2() {
   
        console.log("async2");
    }
    console.log("js start");
    setTim

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

loveX001

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

2024高频前端面试题（含答案）

weixin_44672169的博客

04-22

21万+

一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应）（1）CSS浮动第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;

[JavaScript] async/await面试题及其解析

一个普通人的博客

09-03

702

定时器函数在异步操作中的优先级最低；深入理解 async/await 关键字，以及 await 的原理；剖析面试题；

1 条评论您还未登录，请先登录后发表或查看评论

每日一题（五）async function async1() {console.log('async1 start');await async2();console.log('async1 end')

MFWSCQ的博客

03-29

9558

题目描述：写出执行结果，并解释原因（以chrome为准） async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } ...

关于JS中微任务与宏任务这件事

Revin的博客

05-30

295

文章目录简单总结一下在JS事件循环机制中微任务与宏任务。宏任务：在调用栈中执行的代码（包括整体代码script, setTimeout, setInterval、 setlmmediate）微任务：当前宏任务执行完毕，下个宏任务执行开始之前的任务称之为微任务（最常见的是promise.then, await）接下来以一个实例详细分析微任务与宏任务的执行过程首先看下面一段代码 <script> async function async1() {

JavaScript 中的事件循环

花花生的博客

04-26

836

题意描述：给出以下代码的运行结果。输入： async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } conso...

async await 面试题

weixin_45345105的博客

11-14

2370

async function t1() { let a = await "lagou"; console.log(a); } t1(); console.log('a') 先打印A 后执行微任务里的 let a = await “lagou”; console.log(a); 原理其实就是Generator 问题1解析 await是一个表达式，如果后面不是一个 promise 对象，会先把表达式转换成promise function * t1 () { let a = yield "lagou

async/await深入学习

DPJune的博客

03-29

293

首先看这么一段代码： async function async1() { console.log('a'); await async2(); console.log('b'); } async function async2(){ console.log('c'); } async1(); new Promise(function (resolve) { console.log('d'); ...

异步，同步，setTimeout，Promise，async 案例代码详解

hyupeng1006的博客

04-12

444

直接上代码： async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log('async2') } console.log('script start') setTimeout(() => { console.log('setTimeout') },0) a

setTimeout,promise,promise.then, async,await执行顺序问题

Zhq16899的博客

03-13

160

setTimeout,promise,promise.then, async,await执行顺序问题请看下面题目： async function async1() { 　　　　console.log('async1 start'); 　　　　await async2(); 　　　　console.log('asnyc1 end'); 　　} 　　async function async2() { 　　　　console.log('async2'); 　　} 　　console.log('script

js异步同步微宏任务

m0_59993469的博客

12-13

554

先看下面一串代码 async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log( 'async2') } cons

作为一个菜鸟，至今才弄明白前端async、await以及setTimeout的执行顺序

最新发布

mataodehtml的博客

02-08

1500

宏任务：macrotask（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。浏览器为了能够使得 JS 内部 macrotask 与 DOM 任务能够有序的执行，会在一个 macrotask 执行结束后，在下一个 macrotask 执行开始前，对页面进行重新渲染。其中数字代表线程执行遇到的顺序，主线程第一次执行结束后，再次执行微任务队列中的任务，最后执行的是宏任务队列中的任务。下面再通过一个例子去更深次理解宏任务和微任务。

事件循环机制（同步事件，宏任务、微任务「大厂真题解析」）

小白目的博客

03-25

580

引言：Js 是单线程，多任务执行时会触发进程阻塞问题。所以，Js 有两种任务的执行模式：同步和异步。同步任务：运行在主线程，先于异步任务执行异步任务：分为宏任务和微任务，微任务先于宏任务执行微任务：process.nextTick、Promise.then/ catch/finally、async修饰的函数，默认返回new Promise对象宏任务：setTimeout、setInterval、ajax请求、文件读写操作实操1：实操1： .........

js的执行顺序

smallNut的博客

02-16

3201

JS的运行机制先来一个今日头条的面试题 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.l

一道经典的考察事件循环、宏任务、微任务的js题

Gyoung杨广

01-16

939

一道经典的考察事件循环、宏任务、微任务的js题 async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } async function async2(){ console.log('async2') } console.log('script star...

JavaScript async & await 执行顺序

Lhy_JL的博客

05-11

413

仅以此篇加深记忆： 1、什么是async、await？ async / await 是Generator函数的语法糖，原理是通过Generator函数 + 自动执行器实现的，这使得async / await 跟普通函数一样，不用一直 next( ) 执行了。例子1 function f(){ return new Promise((resolve,reject)=>{ resolve('f 函数执行成功的结果'); }); }

今日头条async/await面试题执行顺序

guolinengineer的博客

12-18

4934

async function async1 () { console.log('async1 start') await async2(); console.log('async1 end') } async function async2 () { console.log('async2') } console.log('script start') setTimeout...

ES2017 中的异步函数详解(async function)

完善飞跃

06-14

3415

异步函数中有两个新的关键字async和await async 就是异步的意思 await 就是等的意思. 暂停函数的执行, 等待异步任务完成. 声明异步函数 /*使用关键字 async 声明异步函数. 参数声明和普通函数没有任何的区别*/ async function testAsync(a, b){ console.log(a, b); return "异步...

setTimeout async promise执行顺序总结