JS中宏任务与微任务执行顺序
2019-08-09 本文已影响0人
Odeng
测试setTimeout与Promose的执行顺序
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
console.log('1');//
setTimeout(function () {
console.log('2');//
new Promise(function (resolve) {
console.log('3');//
resolve();
}).then(function () {
console.log('4');//
})
}, 0);
new Promise(function (resolve) {
console.log('5');//
resolve();
}).then(function () {
console.log('6');//
});
setTimeout(function () {
console.log('7');//
new Promise(function (resolve) {
console.log('8');//
resolve();
}).then(function () {
console.log('9');//
});
})
</script>
</body>
</html>
测试结果为： 1->5->6->2->3->4->7->8->9
Node中setTimeout与Promise执行顺序测试
测试代码
console.log('1');//
setTimeout(function () {
console.log('2');//
new Promise(function (resolve) {
console.log('3');//
resolve();
}).then(function () {
console.log('4');//
})
});
new Promise(function (resolve) {
console.log('5');//
resolve();
}).then(function () {
console.log('6');//
});
setTimeout(function () {
console.log('7');//
new Promise(function (resolve) {
console.log('8');//
resolve();
}).then(function () {
console.log('9');//
});
})
/1 5 6 2 3 7 8 4 9
测试结果为：
结论分析
setTimeout内部回调函数执行顺序在浏览器环境与node环境是有差异的。
1.浏览器环境是执行完seTimeout内部回调函数内容 。所以第一个setTimeout中的“2 3 4”先与第二个setTimeout中的“7 8 9”打印。
2.node环境中setTimeout内部如果还有异步操作，直接跳到下一个setTimeout回调代码中。至于两个setTimeout中promose.then内部的执行顺去取决于微任务的入队顺序
async、await、promise执行顺序测试
function testSometing() {
console.log("testSometing function");
return "testSometing return";
}
async function testAsync() {
console.log("testAsync function");
return Promise.resolve("testAsync promise");
}
async function test() {
console.log("test function");
const v1 = await testSometing();
console.log(v1);
const v2 = await testAsync();
new Promise(function (resolve, reject) {
console.log('promise2');
resolve()
}).then(function () {
console.log('promise2 then');
})
console.log(v2);
console.log(v1, v2);
}
console.log('start');
test();
var promise = new Promise((resolve) => {
console.log("promise");
resolve("promise then");
});
promise.then((val) => {
console.log(val)
});
console.log("end")
//start->test function->testSometing function->promise->
//end->testSometing return ->testAsync function->promise then ->promise2->testAsync promise
//->testAsync promise testAsync promise promise2 then
执行结果
1.start
2.test function
3.testSometing function
4.promise
5.end
6.testSometing return
7.testAsync function
8.promise then
9.promise2
10.testAsync promise
11.testSometing return testAsync promise
12.promise2 then
async、await、promise实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
console.log('1');
async function async1() {
console.log('2');
await async2();
console.log('3');
}
async function async2() {
console.log('4');
}
//调用async1
async1();
setTimeout(function () {
console.log('5');
new Promise(function (resolve) {
console.log('6');
resolve();
}).then(function () {
console.log('7');
});
}, 0);
new Promise(function (resolve, reject) {
console.log('8');
resolve();
}).then(function () {
console.log('9');
})
setTimeout(function () {
console.log('10');
new Promise(function (resolve) {
console.log('11');
resolve();
}).then(function () {
console.log('12');
});
}, 0);
console.log('13');
//1 2 4 8 13 9 3 5 6 7 10 11 12
</script>
</body>
</html>
