Promise和异步同步

1. 同步和异步

   • 同步：停止等待运行结束，继续后续的运行
   • 异步：需要等待一个内容完成后继续执行后面的内容，但是不能将后面的内容写在等待函数外，否则就会同时执行两个
   • 图片要进行预加载，否则不会出现图片的宽高。浏览器具有缓存功能

2. 异步操作

   • 操作性事件 需要时间

   • load事件 异步 需要加载

   • setTimeout 异步

   • setInterval 异步

   • requestAnimationFrame 异步

   • 注意：async 放在下一帧执行

     ​ defer 所有内容全部加载完成，HTML标签已经完成渲染，给最后执行的代码加

3. 宏任务和微任务

   • 异步和同步都是在完成任务列的内容
   • 同步任务逐条进行
   • 固定时间异步：setTimeout setInterval requestAnimationFrame(帧时间固定) Promise
   • 非固定时间异步：加载文件和加载图片，通信
   • 宏任务和微任务
     • setTimeOut setInterval 宏任务
     • Promise 微任务
     • 宏任务指将当前的任务挪至下一个新的任务列的最顶端执行
     • 微任务指将当前任务的内容挪至当前任务列的最底端执行
     • 注意：事件抛发都是同步及时触发

4. async和await

   • async函数执行后返回一个promise对象
   • await只能写在async函数中
   • await只能处理promise对象的异步等待
   • async函数使用return返回的内容可以通过then来获取

5. promise

   • 基本使用方法

   • //实例化promise对象p
     var p=new Promise(function(resolve,reject){
         var img=new Image();
         img.src="./img/17.jpg";
         img.onload=function(){
             resolve(img);//加载成功执行该函数
         }
         img.onerror=function(){
             reject(img.src+"地址错误");//加载失败执行该函数
         }
     });
     
     //第一种表示方法
     p.then(function(a){
         console.log(a);//执行resolve这个函数
     },function(b){
         console.log(b);//执行reject这个函数
     })
     
     //第二种表示方法
     p.then(function(a){
         console.log(a);//执行resolve这个函数
     }).catch(function(b){
         console.log(b);//执行reject这个函数
     })
     

   • Promise.all方法

   • //getImage方法
     function getImage(src) {
         return new Promise(function (resolve, reject) {
             var img = new Image();
             img.src = src;
             img.onload = function () {
                 resolve(img);
             };
         });
     }
     var arr=[];
     for(var i=3;i<80;i++){
         arr.push(getImage("./img/"+i+"-.jpg"));
     }
     //统一处理所有的promise数组，并且返回一个列表
     Promise.all(arr).then(function(list){//注意是list数组
         list.forEach(item=>{
             console.log(item.src)
         })
     })
     

   • 异步列表中谁最先完成就执行谁

   • Promise.race(arr).then(function(img){
         console.log(img);
     })
     

   • 几种简写方式

   • //成功时
     new Promise(function(resolve,reject){
         resolve(1);
     }).then(function(a){
         console.log(a);
     })
     等价于
     //注意是then
     Promise.resolve(1).then(function(a){
         console.log(a);
     })
     
     //失败时
     new Promise(function(resolve,reject){
         reject(1);
     }).catch(function(b){
         console.log(b);
     })
     等价于
     //注意是catch
     Promise.reject(1).catch(function(b){
         console.log(b);
     })
     

   • 代码执行的顺序

   • //在Promise对象的then和catch中都是异步的，除此之外都是同步
     console.log("a");
     new Promise(function(resolve,reject){
         console.log("b");
         resolve(1);
         console.log("c");
     }).then(function(a){
         console.log("d");
     }).then(function(){
         console.log("e");
     }) 
     console.log("f");
     
     //结果是abcfde
     

   • Promise中resolve和reject执行干扰问题

   • function getImage(src) {
         return new Promise(function (resolve, reject) {
             var img1 = new Image();
             img1.src = src;
             img1.onload = function () {
                 //只能执行一个，具有排他性
                 //谁放在前面，就执行那个
                 resolve(img1);
                 reject(img1.src+"地址错误");
             };
         });
     }
     getImage("./img/3-.jpg").then(function(img){
         console.log(img);
     }).catch(function(msg){
         console.log(msg);
     })
     
     //解释：PromiseStatus 状态机  分为3个
         //   pending  准备状态
         //   fullfiled  执行resolve的状态
         //   rejected  执行reject的状态
     // 当你new promise时，会给你一个pending状态，执行到onload时，也就是加载成功时，就会执行resolve方法，PromiseStatus就会变成fullfiled;再去执行reject方法时，就会判断当前是什么状态，如果不是pending状态，就不会执行reject(img1.src+"地址错误");。一旦变成 resolved，就不执行reject值
     

6. 红绿灯

   • function setLight(light,time=3000){
         return new Promise(function(resolve,reject){
             setTimeout(function(){
                 resolve(light);
             },time);
         })
     }
     //方法一
     function showLight(){
         //开始
         setLight("红").then(function(light){
             console.log(light);
             return setLight("黄",2000);//返回promise对象
         }).then(function(light){
             console.log(light);
             return setLight("绿",1000);
         }).then(function(light){
             console.log(light);
             showLight();//从头开始，从红灯开始
         })
     }
     showLight();
     //方法二
     async function showLight(){
         var arr=["红","黄","绿"];
         for(var i=0;i<arr.length;i++){
             await setLight(arr[i]).then(function(light){
                 console.log(light);
             })
         }
         showLight();
     }
     showLight();
     //方法三
     var id;
     function setLight() {
         arguments[0](arguments[1], arguments[2]);
     }
     function redLight(fn, fn2) {
         clearTimeout(id);
         console.log("红灯");
         id = setTimeout(fn, 2000, fn2, arguments.callee);
     }
     function yellowLight(fn, fn2) {
         clearTimeout(id);
         console.log("黄灯");
         id = setTimeout(fn, 2000, fn2, arguments.callee);
     }
     function greenLight(fn, fn2) {
         clearTimeout(id);
         console.log("绿灯");
         id = setTimeout(fn, 2000, fn2, arguments.callee);
     }
     setLight(yellowLight, redLight, greenLight);