JavaScript是一门单线程的语言,因此,JavaScript在同一个时间只能做一件事,单线程意味着,如果在同个时间有多个任务的话,这些任务就需要进行排队,前一个任务执行完,才会执行下一个任务。
有很多小伙伴不明白【整体代码script】为何是一个宏任务,为了让大家更好理解这里举个栗子…
例子①
<!-- 脚本 1 -->
<script>
// 同步
console.log('start1')
// 异步宏
setTimeout(() => console.log('timer1'), 0)
new Promise((resolve, reject) => {
// 同步
console.log('p1')
resolve()
}).then(() => {
// 异步微
console.log('then1')
})
// 同步
console.log('end1')
</script>
<!-- 脚本 2 -->
<script>
// 同步
console.log('start2')
// 异步宏
setTimeout(() => console.log('timer2'), 0)
new Promise((resolve, reject) => {
// 同步
console.log('p2')
resolve()
}).then(() => {
// 异步微
console.log('then2')
})
// 同步
console.log('end2')
</script>
结果:
例子②
setTimeout(() => {
// 同步
console.log('start1')
// 异步宏
setTimeout(() => console.log('timer1'), 0)
new Promise((resolve, reject) => {
// 同步
console.log('p1')
resolve()
}).then(() => {
// 异步微
console.log('then1')
})
// 同步
console.log('end1')
}, 0)
setTimeout(() => {
// 同步
console.log('start2')
// 异步宏
setTimeout(() => console.log('timer2'), 0)
new Promise((resolve, reject) => {
// 同步
console.log('p2')
resolve()
}).then(() => {
// 异步微
console.log('then2')
})
// 同步
console.log('end2')
}, 0)
结果:
综上,两个结果是一样的,所以证实了 <script></script>
整体跟 setTimeout
一样是宏任务。
执行顺序是:
排前面的 script 先执行,执行其内部的【同】,再执行其【微】,接着就轮到下一个大的宏,也就是执行下一个 script,【同】、【微】。。。顺序执行完后,再从头开始,看第一个 script 是否有需要执行的【宏】,再去下一个 script 中找 【宏】,等大家宏结束后,进入下一轮循环。