js理解异步编程和回调

什么是异步

计算机在设计上是异步的。

异步意味着事情可以独立于主程序流发生。

当你打开一个网页,网页载入的过程,你又打开了编译器,那么你在网页载入时启动了编译器的行为就是计算机的异步,

可以看出计算机时一个超大的异步程序集合,在计算机中你可以同时做很多事情而不必一件事情做完在做下一件,

但是在浏览器中不同,浏览器只有一条主线,它沿着主线按部就班的执行程序,在渲染一个网页时,总是自上而下的执行 html,head,body,以及其内部的元素,

当一个网页的头部太大,或者加载一个网页时因网络原因导致网页的头部渲染的太慢时,可能会出现很长时间的‘白屏’,在head渲染完成之前,body都不会开始渲染,

这对用户的体验时很糟的,而JavaScript 是一种单线程的语言,这表示它和浏览器一样只有一条主线,一次只能完成一件事情,作为用户我们都希望可以在交互上进行异步操作,就像计算机那样,同时可以执行多个操作,

而回调和异步函数就解决了这个需求,

回调和异步函数

在处理事件时,往往不能马上解决,需要用户的交互行为产生才能响应处理,

在一个网页中,同一时间可能有多个事件等待触发,同时事件在等待时,页面也可能还有其他的事情要做(例如,读取网络资源图片,视频等),

这个时候回调就显得很重要,这些待处理的事件全部放到一个事件循环的队列中,当触发事件时,这个队列响应并处理,而在等待触发事件的过程,浏览器可以执行其他操作,

回调函数曾经是 JavaScript 中实现异步函数的主要方式,

在加入了promise和async await之后,能够更好的控制异步的函数(不能立刻执行完),

通过回调和异步执行,JavaScript 的事件循环模型的一个非常有趣的特性是,它永不阻塞,

要注意alert提示还是会阻塞,当页面触发提示时,页面上的其他内容会被停止,直到alert结束

定时器,典型的异步回调函数

setTimeout(),setInterval()

setTimeout(() => {}, 1000);
setInterval(() => {}, 1000);

它们都不会立刻执行,而是会等待1秒,事实上即使这个时间参数为0,它也不会立即执行,而是被塞到事件循环中首个执行,这表示它会比不同函数更慢执行,

setTimeout(() => {console.log("这是异步函数的输出");
},0);(()=>{console.log("这是同步函数的输出");
})();

 这里涉及到的事件循环,它总是排在同步函数的后面,即便参数是0ms,但在实际使用时,它确实会马上响应,这是因为计算机的算力很快,几乎可以在瞬间完成所有的同步操作,正常情况下很难感受到它所花费的时间

事件循环

js中有大量的异步事件,它们全部都被塞入到一个循环队列中,

一个循环结构大致可以理解成:

        循环开始(回调的预处理工作+待执行的回调)--->

        是否有新的回调或者事件需要执行--->

        检查是否有新的回调或者事件->结束本次循环--->

        下一次循环开始.......

有的时候,我们需要某些异步函数立刻执行,比如网络请求,我们需要先拿到结果,在进行渲染,这个时候就要求异步函数先执行,通过async和await,相当于可以不让异步函数进入事件循环,同时阻塞后面的函数执行,

process.nextTick

如果你有一个事件需要在所有其他事件之前执行,nodejs提供了process.nextTick

process.nextTick和定时器有些不同,它保证了它的回调会在事件循环(或者是下一个事件循环)之前执行,它的回调总是会被提到一个事件循环的顶部,

可以看到它的执行优先级比setTImeout(()=>{},0)还要高,

整体的执行顺序就是:同步函数--->process.nextTick--->setTImeout(()=>{},0)--->setImmediate--->其他异步函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为防火墙 1

华为防火墙1 实验拓扑: 实验步骤: 1.完成终端基本IP信息配置 2.配置防火墙: 2.1配置IP地址 sys Enter system view, return user view with CtrlZ. [USG6000V1]undo in e Info: Saving log files… Info: Information center is disabled. […

基于小波脊线的一维时间序列信号分解方法(MATLAB R2018A)

信号分解技术是把一个复杂信号分解为若干含有时频信息的简单信号,研可通过分解后的简单信号来读取和分析复杂信号的有效特征。因此,信号分解技术对分析结果的影响是不言而喻的。 傅里叶分解是早期常用的信号分解方法,最初被用于分析热过程&a…

JavaScript基础(十二)

截取字符串 //对象名.toLowerCase();将字符串转为小写 var strLAOWANG; strstr.toLowerCase(); console.log(str); //对象名.toUpperCase();将字符串转为大写 var str1laowang str1str1.toUpperCase(); console.log(str1); 截取字符串 //方法1:对象名.substr(a,b); …

Unity世界坐标下UI始终朝向摄像机

Unity世界坐标下UI始终朝向摄像机 1、第一种方法UI会反过来 void Update(){this.transform.LookAt(Camera.main.transform.position);}2、第二种方法 Transform m_Camera;void Start(){m_Camera Camera.main.transform;}void LateUpdate(){transform.rotation Quaternion.Lo…

kafka-生产者事务-数据传递语义事务介绍事务消息发送(SpringBoot整合Kafka)

文章目录 1、kafka数据传递语义2、kafka生产者事务3、事务消息发送3.1、application.yml配置3.2、创建生产者监听器3.3、创建生产者拦截器3.4、发送消息测试3.5、使用Java代码创建主题分区副本3.6、屏蔽 kafka debug 日志 logback.xml3.7、引入spring-kafka依赖3.8、控制台日志…

关于烫烫烫和屯屯屯

微较的msvc编译器,调试模式下为了方便检测内存的非法访问,对于不同的内存做了初始化, 未初始化栈: 0xCCCCCCCC 未初始化堆: 0xCDCDCDCD 已释放的堆: 0xDDDDDDDD 0xCCCC解释为GB2312字符即是烫&#xff…

Django 鸡与蛋问题

"Django 的鸡与蛋问题"通常指的是在开始 Django 项目时,你可能会遇到的一个困境:是先设计数据库模型还是先编写视图和控制器(即视图函数)? 这个问题的实质是在于,Django 的核心部分是由数据库模…

Qt5/6使用SqlServer用户连接操作SqlServer数据库

网上下载SQLServer2022express版数据库,这里没啥可说的,随你喜欢,也可以下载Develop版本。安装完后,我们可以直接连接尝试, 不过一般来说,还是下载SQLServer管理工具来连接数据更加方便。 所以直接下载ssms, 我在用的时候,一开始只能用Windows身份登录。 所以首先,我…

入门matlab

常识 如何建一个新文件 创建新文件,点击新建,我们就可以开始写代码了 为什么要在代码开头加入clear 假如我们有2个文件,第一个文件里面给x赋值100,第二个文件为输出x 依次运行: 结果输出100,这是因为它们…

ChatGPT Prompt技术全攻略-精通篇:Prompt工程技术的高级应用

系列篇章💥 No.文章1ChatGPT Prompt技术全攻略-入门篇:AI提示工程基础2ChatGPT Prompt技术全攻略-进阶篇:深入Prompt工程技术3ChatGPT Prompt技术全攻略-高级篇:掌握高级Prompt工程技术4ChatGPT Prompt技术全攻略-应用篇&#xf…

电脑缺失msvcp110.dll文件的解决方法,总结5种靠谱的方法

在计算机使用过程中,我们可能会遇到一些错误提示,其中之一就是“找不到msvcp110.dll”。这个错误提示通常出现在运行某些软件时,那么,它究竟会造成哪些问题呢? 一,msvcp110.dll文件概述 msvcp110.dll是Mic…

推荐云盘哪个好,各有各的优势

选择合适的云盘服务是确保数据安全、便捷分享和高效协作的关键。下面将从多个维度对目前主流的云盘服务进行详细的对比和分析: 速度性能 百度网盘青春版:根据测试,其上传和下载确实不限速,但主要定位是办公人群,适用于…

STM32F103C8T6 HAL库 USART1 DMA方式接收数据

前言: 前面的两篇文章都说关于发送的,HAL库发送数据可以调用现成的函数,而接收数据,现成函数不太好用。这里为了记录了一下自己参考了网上几个大佬的代码,整理了一下USART1 DMA方式接受数据的代码,…

Elasticsearch 认证模拟题 - 17

这两道题目非常具有代表性,分别是跨集群复制和跨集群检索,需要相应的 许可 这里在虚拟机上搭建集群完成这两道题目,这里补充一下 elasticsearch 和 kibana 的配置文件 # elasticsearch.yml cluster.name: cluster2 node.name: cluster2-node…

Linux之文件操作

目录 第1关:文件的创建 任务描述 相关知识 文件的创建 编程要求 答案: 第2关:文件打开与关闭 任务描述 相关知识 文件的打开 文件的关闭 编程要求 答案: 第3关:文件读写操作 任务描述 相关知识 文件的写操作 文件的读…

【Redis学习笔记05】Jedis客户端(中)

Jedis客户端 1. 命令 1.1 String类型 1.1.1 常见命令 SET命令 语法:SET key value [EX seconds | PX milliseconds] [NX|XX] 说明:将string类型的value值设置到指定key中,如果之前该key存在,则会覆盖原先的值,原先…

前端计网面试题(二)

一、在浏览器中输入url并且按下回车之后发生了什么? 首先解析url,判断url是否合法,如果合法再判断是否完整。如果不合法,则使用用户默认的搜索引擎进行搜索。DNS域名解析获取URL对应的ip地址。(首先看本地是否有缓存&…

HTML开发 Vue2.x + Element-UI 动态生成表单项并添加表单校验

基于vue2.x 和element-ui 动态生成表单项并添加表单校验; 1、需求问题 如下图,项目有个需求,点击添加按钮,新增一行设备信息,且每项信息必填; 2、代码 看到这个需求,首先想到要使用v-for的形…

使用 flask + qwen 实现 txt2sql 流式输出

前言 一般的大模型提供的 api 都是在提问之后过很久才会返回对话内容,可能要耗时在 3 秒以上了,如果是复杂的问题,大模型在理解和推理的耗时会更长,这种展示结果的方式对于用户体验是很差的。 其实大模型也是可以进行流式输出&a…

Vue3 一 快速启动基于Vite 创建项目

编码规范 TypeScript 组合式API setup语法糖 基于Vite 创建项目 WinR输入 CMD 回车后打开CMD命令行 已安装 18.3以上版本的NodeJS,js(安装) 我们用 NPM 方式安装 输入命令npm create vuelatest PS D:\WORK\NodeJS> npm create vuelatest Need to install the following …