参考自 https://github.com/Advanced-F... 以下是一道异步的笔试题,写出运行结果: async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log" />
  • 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JS异步笔试题

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4419.html 1190000019638040">

参考自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,依次执行下去直至所有任务执行结束。


分析题目:

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

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...

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!