JavaScript—异步、事件循环面试题

已于 2022-07-29 18:08:11 修改
阅读量1.6k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2022-03-13 23:06:45 首次发布
ysugarr
本文链接：https://blog.csdn.net/qq_37430374/article/details/123467032
版权

因为对知识点的理解不到位，导致文章大改。以后不想写博客了。

一、基础知识

1.1 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

  1. Promise是一个构造函数
    1. 可以创建Promise的实例，const p = new Promise()
    2. new出来的Promise实例，代表一个异步操作，该异步操作立即执行
  2. Promise.prototype原型对象上包含一个.then()方法
    1. 每一次new Promise()构造函数得到的实例对象，都可以通过原型链的方式访问到.then()，例如p.then()
  3. .then()方法用来预先指定成功和失败的回调函数
    1. p.then(成功的回调函数，失败的回调函数)
    2. 成功的回调函数是必选的，失败的回调函数式可选的
  4. 在.then()方法返回一个新的promise，可继续.then()
    1. 相当于在这个新的promise上继续设置回调函数
  5. 如果在promise的链式操作中发生了错误，可以使用Promise.prototype.catch方法进行捕获和处理。如果不希望前面的错误导致后续的.then无法正常执行，则可以将.catch的调用提前。

1.2 同步任务与异步任务

JS任务分为两类：同步任务与异步任务

  • 同步任务（非耗时任务）：在主线程排队执行的任务
  • 异步任务（耗时任务）：委托给宿主环境执行的任务
    • 宏任务：异步Ajax、setTimeout、setInterval、文件操作等
    • 微任务：Promise.then、Promise.catch等

 1.3 事件循环机制

JavaScript主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。

  • 每一个宏任务执行完之后，都会检查是否存在待执行的微任务
    • 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
    • 没有，则执行下一个宏任务。

Promise.then加入微任务队列的时机：（非常重要）

参考：promise then 的回调函数是在什么时候进入微任务队列的？ - SegmentFault 思否、

异步的 Promise的 then 方法的回调是何时被添加到microtasks queue中的? - 知乎

如果在调用then时，如果promise已经resolve了，那么就是fullfilled状态，会将其任务加入微任务队列；如果在调用then时，promise没有resolve或reject，处于pending状态，会将其任务缓存在一个结构里，直到promise被接受或者拒绝时，加入微任务队列。

二、面试题

1、实现sleep()函数

setTimout((), 1000);
console.log("finished");

通常来说，第一反应是直接用setTimout()作为sleep()函数，但上述方法不可行，因为setTimeout会直接被加入宏任务队列，而下面的console.log是同步任务，所以会直接先输出。

setTimout(()=>console.log("finished"), 1000);

这种方法可以实现1s后执行回调函数里的内容，但使用了回调函数的实现方式，可读性和维护性差

function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
}
sleep(1000).then( ()=> console.log("finished"));

可以使用Promise优雅的构建sleep方法，避免使用回调函数。

async await实际上只是语法糖，提供同步编程方式实现异步调用。(也就是看上去是同步的，休眠了1s之后做其他的事情，但是实际上是通过异步来实现的。

function sleep(ms){
    return new Promise((resolve)=>setTimeout((resolve), ms));
}
//立即执行函数
(async function (){
    await sleep(1000);
    console.log("fin");
    //需要执行的其他的代码
})();

实现每隔1s输出一个数字：

function sleep(ms){
    return new Promise((resolve)=>setTimeout((resolve), ms));
}
(async function (){
    for(let i = 0; i < 5; i++){
        await sleep(1000);
        console.log(i);
    }
})();

2、执行顺序-1

let promise = new Promise(function(resolve, reject){
    console.log("AAA");
    resolve();
});
promise.then(() => console.log("BBB"));
console.log("CCC")

// AAA
// CCC
// BBB

Promise新建后会立即执行，所以首先输出AAA。然后，promise调用resolve()，将.then()方法加入微任务队列，继续执行后面的同步任务，输出CCC，最后清空微任务队列，最后输出BBB。

3、执行顺序-2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="#">
</head>
<script>
    setTimeout(function () {
        console.log('setTimeout', document.body);
    }, 0);
    new Promise((resolve) => { 
        console.log("hi"); 
        resolve(); 
    }).then(()=>{ console.log('promise', document.body);});
    console.log(document.body);
    //输出
    //hi
    //null
    //promise null
    //setTimout hello
</script>
<body>
    <div>hello</div>
</body>

</html>

考点一：Script脚本的加载：脚本比先一步页面加载，如何解决上述的问题？

  1. 将所有需要的<script>标签都放在</body>之前，确保脚本执行之前完成页面渲染而不会造成页面堵塞问题。
  2. 合并JS代码，尽可能少的使用script标签
  3. 通过给script标签增加 defer属性或者是 async 属性来实现，async和defer不同之处是async加载完成后会自动执行脚本，defer加载完成后需要等待页面也加载完成才会执行代码。<script src="file.js" defer></script>
  4. 动态创建script来加载
function loadJS( url, callback ){
    var script = document.createElement('script'),
        fn = callback || function(){};
    script.type = 'text/javascript';
    //IE
    if(script.readyState){
        script.onreadystatechange = function(){
            if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                script.onreadystatechange = null;
                fn();
            }
        };
    }else{
    //其他浏览器
        script.onload = function(){ fn(); };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
//用法
loadJS('file.js', function(){ alert(1);});

考点二：微任务队列，宏任务队列

  1. setTimeout会将任务加入宏任务队列
  2. Promise新建后会立即执行，所以会先输出"hi"，此时promise的状态为fullfilled，.then中的回调函数加入微任务队列。
  3. 输出document.body，但因为脚本的加载阻塞的页面的加载，所以输出"null"
  4. 清空微任务队列，输出"promise null"
  5. 此时页面的加载已经完成，输出宏任务队列的内容，"setTimeout hello"

4、执行顺序-3

const setDelay = (millisecond) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("hi");
            resolve(`我延迟了${millisecond}毫秒后输出的`)
        }, millisecond)
    })
}
const setDelaySecond = (seconds) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`我延迟了${seconds}秒后输出的，是第二个函数`)
        }, seconds * 1000)
    })
}

setDelay(2000)
    .then((result) => {
        console.log(result)
        console.log('我进行到第一步的');
        return setDelaySecond(3)
    })
    .then((result) => {
        console.log('我进行到第二步的');
        console.log(result);
    })

//输出：
//hi
//setDelay:延迟了2000毫秒后输出
//我进行到第一步的
//我进行到第二步的
//setDelaySecond:延迟了3秒后输出

考点：promise回调函数加入微任务队列的时机 

如果在调用then时，如果promise已经resolve了，那么就是fullfilled状态，会将其任务加入微任务队列；如果在调用then时，promise没有resolve或reject，处于pending状态，会将其任务缓存在一个结构里，直到promise被接受或者拒绝时，加入微任务队列。

这里的"hi"和"setDelay:延迟了2000毫秒后输出"是一起输出的，因为它们同时加入微任务队列。

5、执行顺序-4

基础知识：async声明的函数的返回本质上是一个Promise，在await表达式之后的代码可以被认为是存在在链式调用的then回调方法中。

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('illegalscript start');
setTimeout(function () {
    console.log('setTimeout');
}, 0);
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});
console.log('illegalscript end');

输出顺序：

illegalscript start
async1 start
async2
promise1
illegalscript end
async1 end
promise2
setTimeout

理解：执行到await async2的时候，相当于new了一个promise，因此直接console.log('async2');，而console.log('async1 end');相当于promise的.then()方法，被加入到微任务队列里。后面的console.log('promise2');也被加入到微任务队列里，所以会在同步任务执行完成之后，输出微任务队列里的两个console.log。

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2 start');
    new Promise((resolve, reject) => {
        resolve();
        console.log('async2 promise');
    })
}

console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0);
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
}).then(function () {
    console.log('promise3');
});
console.log('script end');

输出顺序：

script start
async1 start
async2 start
async2 promise
promise1
script end
async1 end
promise2
promise3
setTimeout

理解：执行到await async2的时候，相当于new了一个promise，因此直接输出async2 start，且async2函数内的promise也是立刻执行的，于是马上输出async2 promise，此时async1 end被加入到微任务队列。

如果将async2函数内的内容改为：

async function async2() {
    console.log('async2 start');
    return new Promise((resolve, reject) => {
        resolve();
        console.log('async2 promise');
    })//new promise 会立即执行， then会分发到微任务
}

输出顺序：

script start
async1 start
async2 start
async2 promise 
promise1
script end
promise2
promise3
async1 end 
setTimeout

(依旧不知道为什么async1 end会在最后输出，只能猜测await fn在resolve之后.then()里的东西，放在一个介于微任务队列和宏任务队列的容器中，等到微任务队列中的东西清空后执行）

ysugarr
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件循环机制面试题
qq_46067877的博客
03-30 244
js事件循环机制
JS事件循环机制 面试题
weixin_65251013的博客
03-29 601
执行结果1.2.案例执行结果1.3.案例执行结果1.4 先执行 宏任务当中的同步任务 --> 微任务当中的同步任务 --> 微任务当中的异步任务 --> 宏任务中的异步任务。
【JS基础】克服事件循环机制的基础面试题，一点也不难
庞囧的博客
01-09 1530
本次文章默认阅读者已掌握JS的单线程和异步的特性，以及事件循环机制的基本原理。内容如有错误欢迎指出。
【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序
二三的博客
09-23 6909
上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！
前端面试题：事件循环(Eventloop)
qq_45587146的博客
02-23 740
事件循环Eventloop
js.rar_JAVASCRIPT面试题_javascript
09-21
这份“js.rar”压缩包文件包含了关于JavaScript的面试题，是帮助求职者准备JavaScript面试的重要资源。以下是根据标题、描述和标签提炼出的一些关键JavaScript知识点，这些内容对于理解和掌握JavaScript至关重要。 ...
JavaScript常见面试题共41页.pdf.zip
10-28
这份名为“JavaScript常见面试题共41页.pdf”的压缩文件，显然包含了41页关于JavaScript面试的常见问题和解答，旨在帮助求职者准备技术面试。从标签“JavaScript常见面试题共”可以看出，它涵盖了JavaScript的基础...
JavaScript面试题大全(推荐)
11-23
JavaScript面试题大全旨在帮助开发者准备面试，涉及到许多基础和进阶的编程概念。以下是其中一些问题的详细解答： 1. **变量赋值问题**： 在JavaScript中，`y`和`z`的值都是`undefined`。这是因为两个`add`函数...
javaScript面试题大全共6页.pdf.zip
11-21
4. **异步编程**：事件循环（Event Loop）、回调函数、Promise、async/await的使用，理解它们如何解决JavaScript的异步问题。 5. **DOM操作**：学会通过JavaScript操作HTML元素，包括选择元素（getElementById、...
JavaScript回调函数面试题.zip
最新发布
05-24
JavaScript回调函数是JavaScript异步编程的核心机制之一，它在处理事件、网络请求、定时任务等方面发挥着重要作用。本文将深入探讨JavaScript回调函数的概念、特点、使用场景以及面试中常见的问题。 **1. 回调函数...
JavaScript面试题及答案-共80道.docx
07-18
在JavaScript面试中，掌握基本类型、变量赋值以及操作符的使用是非常重要的。这里我们将深入探讨几个关键知识点。...在面试中，面试者还需要熟悉作用域、闭包、原型链、异步编程、事件循环、性能优化等更复杂的主题。
JavaScript 43 道面试题及答案.docx
07-09
综上所述，JavaScript面试题往往涉及到语言的基础特性和高级概念，如作用域、类型转换、函数行为以及对象和数组操作等。了解并掌握这些知识点对成为一名合格的JavaScript开发者至关重要。在准备面试时，除了理解这些...
JavaScript面试题
08-13
JavaScript面试题涵盖了许多核心概念，包括闭包、原型与原型链、ES6的新特性以及数组排序和事件轮询。下面是对这些知识点的详细说明： 1. **闭包**： 闭包是一种特殊的作用域机制，它允许一个函数访问并操作其外部...
1.JavaScript面试真题-210页.zip
02-28
这份"JavaScript面试真题-210页.zip"文件包含了一份2024年的最新前端面试题大全，旨在帮助求职者或者开发者深入理解JavaScript以及相关技术，如TypeScript和Vue.js。下面，我们将详细探讨这些面试题所涵盖的知识点。...
700道JavaScript习题及面试题（含答案）
09-18
这700道JavaScript习题及面试题集合涵盖了JavaScript的基础语法、高级特性、DOM操作、BOM处理、Ajax、事件处理、函数、对象、闭包、原型链等多个方面，旨在帮助开发者深入理解和掌握JavaScript的精髓。 1. **基础...
前端面试题之EventLoop(事件循环)
qq_57162416的博客
12-22 745
首先js代码分为同步和异步,浏览器会率先执行同步代码,将异步代码放入任务队列中稍后执行,而异步代码又分为宏任务和微任务,在同步代码全部执行完成后会先执行异步微任务再执行异步宏任务(如下)根据规则可知这道代码题在控制台打印的答案为1 7 8 9 10 2 3 4 6 5。4.如果是异步代码,不会立即执行.微任务就放入微任务队列,宏任务就会放入宏任务队列。6.先执行异步队列中的微任务,再来执行宏任务,完成本次事件循环。3.如果是同步代码,立即执行。p站画师リトル・ファンタジー。2.判断代码是同步还是异步。
事件循环机制及常见面试题
miin_ying的博客
11-24 1627
全局下的宏任务结束，开始全局下的微任务，promise 的微任务队列中按照队列的先进先出原则依次输出，promise2，async1 end，promise4。全局微任务结束，开始下一轮的宏任务。首先开始全局下的宏任务依次输出 script start, async1 start, promise1, promise3, script end。所以再开始下一轮宏任务循环之前先输出了。的任务队列，主栈中的宏任务每一次结束后都是先执行。全局中的微任务执行完成开始下一轮宏任务。中的微任务队列，最后。
线程的生命周期
compruterlearner的博客
09-08 210
线程的五种状态： 新建： 创建线程对象 就绪（有执行资格，没有执行权）： 调用start()方法，但是还没有获取CPU的执行权 运行（有执行资格，有执行权）： 获取到CPU的执行权，执行run方法中的代码 阻塞（没有执行资格，没有执行权）： 没有CPU的执行权，回到就绪状态 死亡：代码运行完毕，线程对象销毁。 ...
面试题 js事件循环如何回答
04-16
关于 js 事件循环的问题，我可以给出如下答案：事件循环是 JavaScript 运行时中的一种机制，用于管理代码中的异步行为和回调函数。它通过一系列的任务队列和事件队列来确保代码的执行顺序和正确性。事件循环的具体实现可以使用 setTimeout()、setInterval()、Promise 等方式来实现。当然，具体实现会依据不同的环境和框架而有所区别。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值