js 事件循环

Posted 2021-01-16 沉默的土豆

//JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。
// 每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。
// 待处理的事件会存储在一个任务队列中，也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

//比如浏览器发送一个ajax请求后浏览器就会监听来自服务端的响应，当获取到服务器响应之后，就会把回调函数放入事件循环当中，让时间循环来调度执行
//模拟

//队列形式 先进先出
let eventLoop = [];
let event;

//浏览器会时时刻刻监听时间循环里是否有等待事件 每次循环称为一次ticket
while(true) {

    //如果事件循环里有等待执行事件 则获取
    if(eventLoop.length > 0) {
        event = eventLoop.shift();
    }

    try {
        event();
    } catch (err) {
        console.log(err);
    }
}

//比如js的定时函数也是有先后顺序这么一个说法的  它会在时间到了以后把回调函数放入事件循环当中  所以如果时间相同  则有先后顺序
setTimeout(function () {
    console.log(0);
},3000);
setTimeout(function () {
    console.log(1);
},1000);

setTimeout(function () {
    console.log(2);
},4000);


for(let i = 0;i<=1000000000000;i++) {

}
//主线程：JS 只有一个线程，称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执行的。
// 所以，主线程中要执行的代码时间过长，会阻塞事件循环的执行，也就会阻塞异步操作的执行。比如上面的循环不执行完 setTimeout回调函数永远不会执行
// 只有当主线程中执行栈为空的时候（即同步代码执行完后），才会进行事件循环来观察要执行的事件回调，当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。