目录
JS 是单线程语言
- 同一个时间只能处理一个任务
为什么 JS 是单线程语言
- 作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM
单线程
- 单线程意味着，所有任务都需要进行排队，前一个任务结束，才能执行后一个任务
- 如果前一个任务耗时很长，那么后一个任务就不得不一直等待
- 于是乎，JS 设计者们把所有任分成两类，同步和异步
同步任务
- 只有前一个任务执行完毕，才能执行后一个任务
异步任务
- 当同步任务执行到某个 WebAPI 时触发异步操作，此时浏览器会单独开线程去处理这些异步任务
// 同步
const a = 2
const b = 3
console.log(a + b)
// 异步
setTimeout(() => {
console.log(a + b)
}, 1000)- 请思考下面的输出结果是什么？
console.log(1)
setTimeout(() => { // 异步任务，放入任务队列中
console.log(2)
}, 0)
console.log(3)
// 1、3、2下图说明了同步任务和异步任务的执行过程
Ajax
Ajax 是异步 JavaScript 和 XML，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
// 创建 XMLHttpRequest 对象
const url = 'http://jsonplaceholder.typicode.com/users'
let xmlhttp
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
}
// 发送请求
xmlhttp.open('GET', url, true)
xmlhttp.send()
// 服务端响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
const res = JOSN.parse(xmlhttp.responseText)
console.log(res)
}
}
/**
* XMLHttpRequest 对象用于在后台与服务器交换数据
* onreadystatechange 事件存储函数
* readyState 可用状态
* 0 请求未初始化
* 1 服务器连接已建立
* 2 请求已接收
* 3 请求处理中
* 4 请求已完成，且响应就绪
*/Callback Hell 回调地狱
- 把上面 ajax 请求封装成一个函数
// 把 ajax 请求的数据用回调函数返回
function ajax(url, callback){
// 发送 ajax 请求
let xmlhttp
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
}
xmlhttp.open('GET', url, true)
xmlhttp.send()
// onreadystatechange 事件存储函数
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
const result = JSON.parse(xmlhttp.responseText)
callback(result)
}
}
}
// 多层嵌套被称为 “回调地狱 callback hell” 或者 “回调深渊”，指的是函数内嵌套函数
const url1 = 'http://jsonplaceholder.typicode.com/users'
const url2 = 'http://jsonplaceholder.typicode.com/todos'
const url3 = 'http://jsonplaceholder.typicode.com/photos'
ajax(url1, res => {
console.log(res)
ajax(url2, res => {
console.log(res)
ajax(url3, res => {
console.log(res)
})
})
})
