同步异步的原理| 学习笔记

简介: 快速学习同步异步的原理。

开发者学堂课程【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 在空闲的情况下,会去事件队列中看,有没有方法达到促发条件。 

image.png

一直都是先执行正常代码,后执行定时代码。

回调函数:

例如: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是异步请求,再这样的情况下

image.png

相关文章
|
6月前
|
前端开发 JavaScript
前端搞懂事件循环机制
【8月更文挑战第3天】前端搞懂事件循环机制
74 1
|
6月前
|
存储 安全 Java
【多线程面试题 七】、 说一说Java多线程之间的通信方式
Java多线程之间的通信方式主要有:使用Object类的wait()、notify()、notifyAll()方法进行线程间协调;使用Lock接口的Condition的await()、signal()、signalAll()方法实现更灵活的线程间协作;以及使用BlockingQueue作为线程安全的队列来实现生产者和消费者模型的线程通信。
|
9月前
|
安全 Java 开发者
谈谈Java线程同步原理
【5月更文挑战第24天】Java 线程同步的原理主要基于两个核心概念:互斥(Mutual Exclusion)和可见性(Visibility)。
80 3
|
9月前
|
Go
Go语言Channel进阶:巧妙运用超时机制
Go语言Channel进阶:巧妙运用超时机制
414 0
|
网络协议 测试技术 Go
goroutine 的引出 | 学习笔记
快速学习 goroutine 的引出
|
消息中间件 数据库 RocketMQ
还不知道事务消息吗?这篇文章带你全面扫盲!
阿粉最近碰到个一个需求,正好需要使用 RocketMQ 事务消息,所以阿粉专门学习了一下。
还不知道事务消息吗?这篇文章带你全面扫盲!
|
算法 Java 调度
一篇文章,搞明白异步和多线程的区别
一篇文章,搞明白异步和多线程的区别
1020 0
一篇文章,搞明白异步和多线程的区别
|
算法 Java 调度
一篇文章,搞懂异步和多线程的区别
一篇文章,搞懂异步和多线程的区别
397 0
一篇文章,搞懂异步和多线程的区别
|
Java 开发者
同步问题引出|学习笔记
快速学习 同步问题引出
101 0
同步问题引出|学习笔记
|
设计模式 安全 Java
这次彻底搞懂并发编程的Balking模式
“多线程版本的if”来理解Guarded Suspension模式,不同于单线程中的if,这个“多线程版本的if”是需要等待的,而且还很执着,必须要等到条件为真。但很显然这个世界,不是所有场景都需要这么执着,有时候我们还需要快速放弃。
247 0

热门文章

最新文章