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(