事件循环

为了防止多线程可能造成的混乱(例如，线程1修改了一段文字，但线程2删除了整段内容)，所以js被设计成单线程

但为了能够不阻塞用户操作, 又需要一种能够暂时脱离单线程的方法

javascript

var box = document.getElementById('box');
box.onClick = function(){
    alert(1111);
}
// 按理来说程序是一行行执行，当上面的这个点击事件未执行时下面的不应输出
// 但点击事件是不确定的，所以就需要机制能够让点击事件暂时超脱于"一行行执行"这个规则
console.log(222);

同步的执行完才进入事件循环。进入事件循环的有：请求、定时器、事件

宏任务

setTimeout、setInterval、requrestNimationFrame

宏任务队列可以有多个

微任务

new Promise().then()、process.nextTick()

微任务队列只有一个

循环规则

微任务执行
在所有微任务完成后，如果有宏任务，则执行宏任务

总结流程

所以，整个js的流程是：

同步=>事件循环(微任务=>宏任务=>微任务...)=>同步=>事件循环=>...

例题

例题一

javascript

for(var i = 0; i< 3; i++){
    setTimeout(function(){
        console.log(i);
    },1000*i);
}

例题二

javascript

setTimeout(function(){
    console.log('1')
})

new Promise((resolve)=>{
    console.log('2')
    resolve();
}).then(()=>{
    console.log('3')
}).then(()=>{
    console.log('4')
})

console.log(5)

事件循环 ​

事件循环