开发者学堂课程【Ajax 前端开发入门与实战:同步异步的原理】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8529
同步异步的原理
1、异步的底层原理
js 中的异步的实现的原理是单线程加事件队列,js 的代码执行是单线程的,所谓的单线程的含义是 js 的代码是从上往下按顺序依次执行的,一定是上一行代码执行完再执行下一行代码。事件队列可以认为是一个容器,这个容器中存储一些回调函数。
这些回调函数只有在 js 代码全部执行完成之后,才有可能会去调用,因为js是单线程的,一次只能做一件事情。
(1)代码展示:
<script type="text/javascript>
setTimeout(function(){
console.log("定时函数代码执行了”);
},2000);
//时间为0,依然先执行正常代码
console.log("正常代码执行了");
</script>
注释:
必然先执行输出正常代码,然后执行输出定时函数,而且是在2s之后输出。
如果继续加代码是:
<script type="text/javascript>
setTimeout(function(){
console.log("定时函数代码执行了”);
},2000);
//时间为0,依然先执行正常代码
for(var i=0;i<10000000;i++){
str += i
}
//依然先执行正常代码
console.log("正常代码执行了");
for(var i=0;i<10000000;i++){
str += i//
依然先执行正常代码
</script>
js 在空闲的情况下,会去事件队列中看,有没有方法达到促发条件。
一直都是先执行正常代码,后执行定时代码。
回调函数:
例如:window.onload = function(){};
btn.onclick
input.onblur
xhr.onreadystatechange = function(){}
都是先将 function 放入事件队列中,先存,等js代码执行后,再回到事件队列中看,那些函数满足促发条件。
(2)代码展示
username.onblur = function(){
var usernameValue = username.value;
//将 usernameValue 提交给服务器,有服务器进行唯一性的校验
//1.创建对象,兼容处理
var xhr = null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject(“Microsoft.XMLHTTP");
}
//2.准备发送
xhr.open("get",”./server/checkUsername.php?uname= +
usernameValue,false);
//false,用户是操作不了界面的,这是同步与异步的区别
//3.执行发送
xhr.send(null);
//制定回调函数
//xhr.onreadystatechange = function(){
if(xhr.readyState ==4)(
if(xhr.status == 200)
var result = xhr.responseText;
var username_result
=document.querySelector(“#username_result");
if(result == "ok"){
username_result.innerText = "用户可以使用";
}else{
username_result.innerText = "用户已经被注册";
}
}
}
}
(3)js 代码是单线函数,只会从上到下依次执行,一步一步执行。
false 的情况下:
xhr.send(null);//会卡住,是同步,下面的代码就不会执行,
True的情况下:
xhr.send(null);//不会卡在这个方法当中,是异步的,是必须执行下面的函数,执行完下面所以代码后,会检查这里面的代码是否满足 onreadystatechange 的条件
false是异步请求,再这样的情况下