资讯专栏INFORMATION COLUMN

JS异步笔试题

Tangpj / 2838人阅读

摘要:分析题目先执行微任务后执行宏任务因此结果为按照这个思路做以下题目做出如下更改运行结果为更改如下更改如下运行结果为运行结果为运行结果为参考自

参考自https://github.com/Advanced-F...

以下是一道异步的笔试题,写出运行结果:
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");

运行结果为:

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

这道题涉及到事件循环中函数执行顺序的问题,其中包括async,await,setTimeout,Promise函数

1.event loop
JS主线程不断的循环往复的从任务队列中读取任务,执行任务,这种运行机制为事件循环.

2.Microtasks, Macrotasks
Microtasks(微任务)和Macrotasks(宏任务)是异步任务的一种类型,Microtasks的优先级要高于Macrotasks,下面是它们所包含的api:

microtasks

process.nextTicks

promise

Object.observe

MutationObserver

macrotasks

setTimeout

setImmerdiate

I/O

UI渲染

1. 每一个 event loop 都有一个 microtask queue
2. 每个 event loop 会有一个或多个macrotaks queue ( 也可以称为task queue )
3. 一个任务 task 可以放入 macrotask queue 也可以放入 microtask queue中
4. 每一次event loop,会首先执行 microtask queue, 执行完成后,会提取 macrotask queue 的一个任务加入 microtask queue, 接着继续执行microtask queue,依次执行下去直至所有任务执行结束。

分析题目:


先执行微任务后执行宏任务,因此结果为

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

按照这个思路,做以下题目:

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    //async2做出如下更改:
    new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
    });
}
console.log("script start");

setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();

new Promise(function(resolve) {
    console.log("promise3");
    resolve();
}).then(function() {
    console.log("promise4");
});

console.log("script end");

运行结果为:

script start
async1 start
promise1
promise3
script end
promise2
async1 end
promise4
setTimeout
async function async1() {
    console.log("async1 start");
    await async2();
    //更改如下:
    setTimeout(function() {
        console.log("setTimeout1")
    },0)
}
async function async2() {
    //更改如下:
    setTimeout(function() {
        console.log("setTimeout2")
    },0)
}
console.log("script start");

setTimeout(function() {
    console.log("setTimeout3");
}, 0)
async1();

new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

运行结果为

script start
async1 start
promise1
script end
promise2
setTimeout3
setTimeout2
setTimeout1
async function a1 () {
    console.log("a1 start")
    await a2()
    console.log("a1 end")
}
async function a2 () {
    console.log("a2")
}

console.log("script start")

setTimeout(() => {
    console.log("setTimeout")
}, 0)

Promise.resolve().then(() => {
    console.log("promise1")
})

a1()

let promise2 = new Promise((resolve) => {
    resolve("promise2.then")
    console.log("promise2")
})

promise2.then((res) => {
    console.log(res)
    Promise.resolve().then(() => {
        console.log("promise3")
    })
})
console.log("script end")

运行结果为

script start
a1 start
a2
promise2
script end
promise1
a1 end
promise2.then
promise3
setTimeout
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")
})
async1()
new Promise(function (resolve) {
    console.log("promise1")
    resolve()
}).then(function () {
    console.log("promise2")
})
console.log("script end")

运行结果为

script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

参考自https://github.com/Advanced-F...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105224.html

相关文章

  • 一道setTimeout async promise执行顺序的试题引发的思考

    摘要:如果你要问他和谁当进去的快,要从下面两个方面考虑结束时。至于什么,查了很多的资料,了解到一个浏览器环境只能有一个事件循环,而一个事件循环可以有多个任务队列。 ====据说这是今日头条去年的一道笔试题,主要考察的是setTimeout async promise执行顺序 ~先双手奉上这道题目~ async function async1() { consol...

    soasme 评论0 收藏0
  • 大管家试题(深圳)

    摘要:子选择器和后代选择器的区别子选择器是选择元素的直接后代,即作用于第一个后代后代选择器则可作用于孙子代曾孙子代等。后代选择器通过空格来进行选择,而子选择器是通过进行选择。 1.css选择器有哪些,优先级如何计算 类别选择器、ID选择器、标签选择器、通用选择(*)、后代选择器、伪类选择器 !important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性 同一级别中...

    sorra 评论0 收藏0
  • 大管家试题(深圳)

    摘要:子选择器和后代选择器的区别子选择器是选择元素的直接后代,即作用于第一个后代后代选择器则可作用于孙子代曾孙子代等。后代选择器通过空格来进行选择,而子选择器是通过进行选择。 1.css选择器有哪些,优先级如何计算 类别选择器、ID选择器、标签选择器、通用选择(*)、后代选择器、伪类选择器 !important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性 同一级别中...

    魏明 评论0 收藏0
  • 前端试题试题记录(下)

    摘要:前言接上篇前端笔试题面试题记录上。默认值,不脱离文档流,,,,等属性不生效。。不脱离文档流,依据自身位置进行偏离,当子元素设置,将依据它进行偏离。。 前言 接上篇前端笔试题面试题记录(上)。趁清明小长假,把上篇剩下的部分也写一下,因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了,应该还是有些小伙伴在找工作,时间还不算太晚,希望本篇可以帮到这些小伙伴。 个人博客了解一下:obkoro...

    Lin_YT 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<