【前端面试题】事件循环event_loop

12月16日更改。

同步任务异步任务：

JavaScript是一个单线程语言。

所谓的单线程就意味着所有的任务都需要排队，前一个任务执行结束之后，才会执行后一个任务。如果前一个任务耗时很长，后一个任务也得一直等着，等前一个任务执行完毕之后，它才能执行。

js中的任务分为同步任务synchronous和异步任务asynchronous。

同步任务就是在主线程上排队执行的任务，只有前一个任务执行完毕，后一个任务才能执行。

异步任务是不进入主线程，而进入任务队列task queue的任务。只有当我们的异步队列通知主线程某个异步任务可以执行的时候，异步队列才会进入主线程执行。

同步任务会进入主线程立即执行，当浏览器遇到异步任务时，会将异步任务扔到任务队列中去，等同步任务执行完毕后，再按照“微先宏后”的执行顺序依次执行异步任务。

微先宏后

就是在异步任务队列中微任务先执行，宏任务后执行。

微任务包括：promise

宏任务包括：setTimeout、setInterval、UI交互、IO、script整体代码

事件循环

事件循环是指主线程从任务队列读取事件这个过程是循环往复的，所以这种主线程不断从任务队列读取事件的运行机制就称为时间循环event loop

定时器

定时事件：指定某些代码在多久之后执行。实现了定时器功能timer

定时器功能主要由setTimeout()和setInterval()这两个函数完成。

其实这两个方法内部的运行机制是完全一样的，但是区别就在于setTimeout指定的代码是一次性执行的，但是setInterval()是重复执行的，停止需要设置clearInterval()。

此外setTimeout()是定时程序，就是指在到达某个指定时间后，需要执行什么事件。

setInterval()是指在一定间隔时间内反复执行某些事件。

下面来看面试题，先看题目，思考后有自己的想法再看题目结果，有不懂的再看解析。

目录

第一题

原题

结果

解析

第二题

原题

结果

解析

第三题

原题

结果

解析

---

第一题

原题

        var promise=new Promise((resolve)=>{
            console.log("promise start...");
            resolve("promise");
        })
        promise.then((val) => {
            console.log(val);
        })
        setTimeout(()=>{
            console.log("settimeout");
        })
        console.log("test end...");

结果

解析

        //第一题
        var promise=new Promise((resolve)=>{
            console.log("promise start...");
            resolve("promise");
        })
        promise.then((val) => {
            console.log(val);
        })
        setTimeout(()=>{
            console.log("settimeout");
        })
        console.log("test end...");
        //先执行promise内部的代码，遇到异步任务将异步任务扔到异步队列里，先处理同步任务；
        //异步任务有：then setTimeout 异步任务队列中先执行微任务，再执行宏任务
        //执行顺序： promise start...->test end...->promise->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(function(resolve){
            console.log("promise1");
            resolve();
            console.log("promise3");
        }).then(function(){
            console.log("promise2");
        })
        console.log("script end");

结果

解析

        //第二题
        async function async1(){
            console.log("async1 start");
            await async2();
            //await后面是个异步方法
            console.log("async1 end");//异步1
        }
        async function async2(){
            console.log("async2");
        }
        //函数定义的时候不执行，但是在函数调用的时候函数体内部的代码才会执行。
        console.log("script start");
        //定时函数
        setTimeout(function(){
            console.log("settimeout");//异步3
        },0)//宏任务后执行
        async1();
        new Promise(function(resolve){
            console.log("promise1");
            resolve();
            console.log("promise3");
        }).then(function(){
            console.log("promise2");//异步2
        })
        console.log("script end");
        //async 可以单独使用 但是await要和async搭配使用 async和await是一对多的关系，即一个async可以有多个await
        //async和await是promise的语法糖,比promise语法更简洁更好用。

第三题

原题

        //第三题
        var promise=new Promise(resolve=>{
            console.log(1);
            resolve()
        })
        setTimeout(()=>{
            console.log(2);
        })
        promise.then(()=>{
            console.log(3);
        })
        var promise2=getPromise();
        async function getPromise(){
            console.log(5);
            await promise;
            console.log(6);
        }
        console.log(8);

结果

解析

        //第三题
        var promise=new Promise(resolve=>{
            console.log(1);
            resolve()//异步
        })
        setTimeout(()=>{
            console.log(2);//异步 最后一个setTimeout
        })
        promise.then(()=>{
            console.log(3);
        })
        var promise2=getPromise();
        async function getPromise(){
            console.log(5);
            await promise;//await 一个promise对象  异步 promise.then
            console.log(6);
        }
        console.log(8);

欢迎点赞、关注、收藏~