十、event loop的机制

JavaScript是如何执行的?

自上而下,从左到右一行一行执行

如果有一行报错,后面的代码不执行

先执行同步代码,在执行异步代码(setTimeout、Ajax)

Event Loop过程

同步代码,一行一行放在call Stack中执行

遇到异步,会先"记录"下代码,等待执行时机(setTimeout、Ajax)。时机到了,将之前"记录""的代码放入Callback Queue

当Call Stack为空(同步代码执行完),Event Loop开始工作

Event Loop轮询查找Callback Queue中是否有可执行的代码,如果有将代码移动到Call Stack中执行

Event Loop如果没有找到可以执行的代码,则会继续轮询查找

    console.log("start");  //最先执行
    setTimeout(()=>{
        console.log("setTimeout"); //最后执行
    },0)
    console.log("end");  //第二个执行

十一、宏任务和微任务的区别

什么是微任务?什么是宏任务?

微任务:Promise、async await

宏任务:setTimeout、setInterVal、Ajax、DOM事件

二者的区别

先执行微任务,后执行宏任务

宏任务、微任务、DOM渲染的关系

1.Call Stack 清空,触发Event Loop

2.执行微任务

3.DOM渲染

4.执行宏任务

完整Event Loop过程

十二、手写promise加载图片

出题目的

考察Image对象 考察Promise对象 考察async await

知识点

Image对象

new Image()--声明一个Image对象 onload--当图片加载成功时执行 onerror--当图片加载失败时执行 .src--设置图片路径

Promise

作用:解决回调地狱问题

async await

作用:promise的语法糖,可以增加代码的可读性(用同步的思维写代码) 语法:

    (async function(){
        try{
            const oImg=await loadImg("http://robohash.org/1");
            document.body.appendChild(oImg1);
            const oImg=await lodImg("http://robohash.org/2");
            document.body.appendChild(oImg2)
        }catch(msg){
            console.log(msg)
        }
    })()

    //四种promise的写法
    const oImg=new Image()
    oImg.src="https://robohash.org/1";
    oImg.onload=()=>{
        document.body.appendChild(oImg)
    }
    oImg.onerror=function(){
        console.log("error");
    }

        new Promise((resolve,reject)=>{
            const oImg = new Image();
            oImg.src="https://robohash.org/1"
            oImg.onload=()=>{
                resolve(oImg)
            }
            oImg.onerror=()=>{
                reject("图片加载失败")
            }
        }).then((oImg)=>{
            document.body.appendChild(oImg)
        }).catch((erMsg) => {
            console.log(erMsg);
        })

  function loadImg(src) {
    return new Promise((resolve, reject) => {
      const oImg = new Image();
      oImg.src = src;
      oImg.onload = () => {
        resolve(oImg);
      };
      oImg.onerror = () => {
        reject("图片加载失败");
      };
    });
  }
  loadImg("https://robohash.org/1")
    .then((oImg) => {
      document.body.appendChild(oImg);
      return loadImg("http://robohash.org/2")
    })
    .then((oImg)=>{
        document.body.appendChild(oImg)
        return loadImg("http://robohash.org/3")
    })
    .then((oImg)=>{
        document.body.appendChild(oImg)
    })
    .catch((erMsg) => {
      console.log(erMsg);
    });

      function loadImg(src) {
      return new Promise((resolve, reject) => {
        const oImg = new Image();
        oImg.src = src;
        oImg.onload = () => {
          resolve(oImg);
        };
        oImg.onerror = () => {
          reject("图片加载失败");
        };
      });
    }
    (async function () {
      try{
      const oImg = await loadImg("https://robohash.org/1");
      document.body.appendChild(oImg);
      const oImg2 = await loadImg("https://robohash.org/2");
      document.body.appendChild(oImg2);
      } catch(err){
        console.log(err);
      }
    })();