什么是单线程
同一时间只能做一件事，就是单线程
js为什么是单线程
因为避免浏览器渲染DOM冲突
怎么解决单线程
异步
event-loop 事件轮询
- js实现异步的具体解决方案
- 同步代码直接执行
- 异步代码放在异步队列中，ajax要等到成功后放入队列
- 待同步函数执行完成之后，轮询执行异步队列的函数
ajax
$.ajax({
url:"url",
dataType:"json",
success:function(data){
...执行成功
}，
error:funciton(err){
... 打印错误
}
})
Promise
- 链式调用
- 状态不可逆（pending-进行中、fullfilled-成功、rejected-失败）
多种写法详见：https://blog.csdn.net/sinat_41904410/article/details/99189547
let p = new Promise(function(resolve,reject){
// resolve成功
// reject失败
$.ajax({
url:"data/arr.txt",
dataType: "json",
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
})
p.then(function(arr){
// 成功
console.log("成功") ;
console.log(arr)
},function(err){
// 失败
console.log("失败")
console.log(err);
})
async-await
// 最直接的同步写法，不用回调
// loadImage用于获取数据的的函数
const load = async function(){
const result1 = await loadImage(src1);
console.log(result1)// 可以进行操作
const result2 = await loadImage(src2);
console.log(result2)// 可以进行操作
}
generator
// *可以挨着function 也可以挨着函数名，也可以两个都不挨-------但是不能连着两个
// yield暂停、放弃的意思，* yield配合使用就是generator函数
// generator函数, 返回一个函数，使用时需要接收
// next()执行一次走一个，以yield隔开
function *show(){
console.log("a");
yield;
console.log("b");
}
let gen = show();
gen.next();
gen.next();
jquery-deffered
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery.js"></script>
</head>
<body>
<script>
// jquery1.5之前的写法，对修改开放，扩展封闭
// var ajax = $.ajax({
// url:"../data/json.txt",
// success:function(){
// console.log("success1");
// console.log("success2");
// console.log("success3");
// },
// error:function(err){
// console.log("fail");
// }
// });
// console.log(ajax);// 返回的是一个XHR对象
// jquery 1.5之后的写法,更易于扩展,对扩展开放，每块单独处理
var ajax = $.ajax("../data/json.txt");
// ajax.done(function(){
// console.log("successa")
// }).fail(function(){
// console.log("fail1")
// }).done(function(){
// console.log("successb")
// }).fail(function(){
// console.log("fail2")
// }).done(function(){
// console.log("successc")
// }).fail(function(){
// console.log("fail3")
// })
// 类似Promise，then(func1成功函数,func2失败函数);
ajax.then(function(){
console.log("success 11")
},function(){
console.log("fail1")
}).then(function(){
console.log("success 12")
},function(){
console.log("fail1")
}).then(function(){
console.log("success 13")
},function(){
console.log("fail1")
})
</script>
</body>
</html>
