【一天时间|JavaScript基础】异步
2023-09-11 14:20:01 时间
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识。直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀!
- 上期回顾 JS基础-作用域和闭包
- 本系列订阅 一天时间迅速准备前端面试(高薪精品)–欢迎订阅
关键字
- 异步
- 同步
- Promise
单线程和异步
- JS 是单线程语言,只能同时做一件事儿
- 浏览器和 node.js 已支持 js 启动进程,如 Web Worker (改变不了 js 是单线程的本质)
- JS和DO渲染共用同一个进程,因为JS可修改DOM结构
- 遇到等待(网络请求,定时任务)不能卡住
- 需要异步(解决单线程等待的问题)
- 回调callback函数形式
// 异步
console.log(100)
setTimeout(function() {
console.log(200)
}, 1000)
console.log(300)
// 同步
console.log(100)
alert(200)
console.log(300)
异步和同步
- 基于JS单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行
异步的应用场景
- 网络请求,如ajax、图片加载
- 定时任务,如setTimeout
// ajax
console.log('start')
$.get('./data1.json', function(data1) {
console.log(data1)
})
console.log('end')
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function() {
console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')
promise的基本使用
- 主要是用来解决回调地狱的问题,出现了promise
把多层嵌套改成了管道串联的形式,提高代码可读性
- 现在主流的方法是使用async 和 await 来进行解决异步问题(
async 和 await 本质上是一个语法糖 使函数的返回值包含在promise中返回
)
callback hell(回调地狱)
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success(data) {
resolve(data)
},
error(err) {
reject(err)
}
})
})
}
const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'
getData(url1).then(data1 => {
console.log(data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log(data3)
}).catch(err => console.error(err))
手写Promise加载一张图片
const url = ""; //img url
function loadImg (src) {
return new Promise(
// resolve、reject都是函数
(resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error('图片加载失败'))
}
img.src = src
}
)
}
loadimg(url).then((img) => {
console.log(img.width)
return img
}).then(img => {
console.log(img.height)
}).catch(ex => console.log(ex)
Promise的详细使用和异步函数请看下一期【异步进阶】
六年代码两茫茫,不思量,自难忘
6年资深前端主管一枚,只分享技术干货,项目实战经验,面试指导
关注博主不迷路~
相关文章
- javascript入门知识点总结(一)
- [转]Javascript原型继承
- JavaScript method overload
- ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础,单线程,跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js:使用 JavaScript 生成
- Google Earth Engine(GEE)——JavaScript基本功能介绍(北极融雪消失的时间的确定)
- 前端基础 - JavaScript之元素操作
- 前端基础 - JavaScript之this关键字
- 前端基础 - JavaScript之表单获取焦点及失去焦点
- 前端基础 - JavaScript语法
- 12Vue - 模板语法(插值-使用JavaScript表达式)
- JavaScript - 把 URL 路径参数拆分为对象键值对形式(将页面路由的所有参数解析转为对象形式)
- 【JavaScript】重温Javascript继承机制
- 最简单的例子理解Javascript闭包
- 一篇文章带你了解JavaScript中的语法,数据类型,流程控制语句以及函数
- JavaScript基础系列
- JavaScript基础-第2章
- JavaScript 基础【快速掌握知识点】
- JavaScript 基础
- 《JavaScript忍者秘籍》——2.3 测试框架
- 《JavaScript高效图形编程(修订版)》——第2章 DHTML基础 2.1创建DHTML sprite
- 《HTML5+JavaScript动画基础》——2.6 小结
- 《HTML5+JavaScript动画基础》——导读
- 《Windows 8 开发权威指南:HTML5 和JavaScript卷》——2.4 HTML5
- TypeScript 与 JavaScript 的区别(TypeScript万字基础入门,了解TS,看这一篇就够了)
- javascript基础,对象和函数(4)
- JavaScript黑客是这样窃取比特币的,Vue开发者不用担心!
- 2018年你需要知道的13个JavaScript工具库
- 华为OD机试 - 最少停车数(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 华为OD机试 - 获得完美走位(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- javascript 的继承
- JavaScript模拟在雷达上用导弹打下敌机,程序员也过过当炮手的瘾!