10.浏览器原理之JS执行机制

关于js执行机制的文章

JS执行机制、同步和异步、宏观任务和微观任务
关于async/await、promise和setTimeout执行顺序# 关于js执行机制的题目：
第一题：

let arr = [1, 1, 1, 1, 1]
for(let i = 0; i < arr.length; i++) {
    setTimeout(() => {
        console.log(i)  //0 1 2 3 4
    })
}

for(var i = 0; i < arr.length; i++) {
    setTimeout(() => {
        console.log(i)   //0 1 2 3 4
    })
}

//同步任务执行完才会执行异步任务
let arr = [1, 1, 1, 1, 1]
let i = 0
for(let len = arr.length; i < len; i++) {
    setTimeout(() => {
        console.log(i) //5 5 5 5 5
    })
}

第二题：

setTimeout(function(){
  	console.log('setTimeout');
})
new Promise(function(resolev, reject){
    console.log('promise');
    for(let i = 0; i < 10000; i++) {
        if(i === 10) {
            console.log('for');
        }
        if(i === 999) {
            reject('reject');
        }
    }
    resolve('resolve');
}).then(function(val){
    console.log(val);
}).catch(function(val) {
    console.log(val);
})
console.log('console');
// promise => for => console => reject => 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')
},0)
async1()
new Promise(resolve => {
    console.log('promise0')
    resolve()
})
.then(() => {
    console.log('promise1')
})
.then(() => {
    console.log('promise2')
})
console.log('script end')
//script start => async1 start => async2 
//=> async2 =>  promise0 => script end
//=> async1 end => promise1 => promise2
//=>setTimeout 

第四题：

async function func1() {
    console.log(1) 
    setTimeout(() => {
        console.log(9)
    },100)
    const result = await func2()
    console.log(result)
}
async function func2() {
    console.log(2)
    return 3
}
new Promise(() =>{
    console.log(8) 
})
Promise.resolve().then(() => {
    console.log(4)
})
setTimeout(() => {
    console.log(5)
}, 100) 
setTimeout(() => {
    console.log(6)
}) 
func1()
console.log(7) 
//812743659