-
同步和异步
- 同步:停止等待运行结束,继续后续的运行
- 异步:需要等待一个内容完成后继续执行后面的内容,但是不能将后面的内容写在等待函数外,否则就会同时执行两个
- 图片要进行预加载,否则不会出现图片的宽高。浏览器具有缓存功能
-
异步操作
-
操作性事件 需要时间
-
load事件 异步 需要加载
-
setTimeout 异步
-
setInterval 异步
-
requestAnimationFrame 异步
-
注意:async 放在下一帧执行
defer 所有内容全部加载完成,HTML标签已经完成渲染,给最后执行的代码加
-
-
宏任务和微任务
- 异步和同步都是在完成任务列的内容
- 同步任务逐条进行
- 固定时间异步:setTimeout setInterval requestAnimationFrame(帧时间固定) Promise
- 非固定时间异步:加载文件和加载图片,通信
- 宏任务和微任务
- setTimeOut setInterval 宏任务
- Promise 微任务
- 宏任务指将当前的任务挪至下一个新的任务列的最顶端执行
- 微任务指将当前任务的内容挪至当前任务列的最底端执行
- 注意:事件抛发都是同步及时触发
-
async和await
- async函数执行后返回一个promise对象
- await只能写在async函数中
- await只能处理promise对象的异步等待
- async函数使用return返回的内容可以通过then来获取
-
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(
-
Promise和异步同步
最新推荐文章于 2024-07-07 16:37:21 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)