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. […

《科学,无尽的前沿》—— 程序员必读

一、总体概述 《科学,无尽的前沿》(Science The Endless Frontier)开创了大政治推动下的大科学工程新范式,被视为“美国科学政策的开山之作,促成了支持科学的“美国战后共识”,是“美国历史上最具影响力的政策文件之一”。 报告…

场内基金和场外基金的区别

场内基金就是只能在场内买卖的基金,只有股票账户才能买。场外就是在场内以外的交易场所买卖的基金。 场内基金和场外基金区别主要是费用和买卖价格。 场内基金和场外基金都有管理费和托管费。二者不同的主要是交易费用。场内基金买卖都要交交易费用,这…

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

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

心链7 ----Redis的引入和实现以及缓存和定时任务应用

心链 — 伙伴匹配系统 Redis 数据查询慢怎么办? 用缓存:提前把数据取出来保存好(通常保存到读写更快的介质,比如内存),就可以更快地读写。 缓存 Redis(分布式缓存)memcached&…

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、控制台日志…

.shape 和 .size的区别

在 Python 中,尤其是使用 numpy 和 torch 库进行数组和张量操作时,.shape 和 .size() 是两个非常常见的方法。虽然它们有时可以互换使用,但它们确实有一些细微的区别。 .shape 属性 类型:.shape 是一个属性。返回值:…

关于烫烫烫和屯屯屯

微较的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,这是因为它们…

013-Linux交换分区管理

一、交换分区的作用 ”提升“内存容量,防止OOM(out of memory,内存溢出)。 从功能上讲,交换分区主要是在内存不够用的时候,将部分内存上的数据交换到swap空间上,以便让系统不会因内存不够用而…

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

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

Web前端Hack:深入探索、挑战与防范

Web前端Hack:深入探索、挑战与防范 在数字化时代的浪潮中,Web前端作为用户与互联网世界交互的桥梁,其安全性日益受到关注。然而,Web前端也面临着各种潜在的攻击和风险。今天,我们将一起探索Web前端Hack的四个方面、五…

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

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

代码随想录【字符串】

一刷&#xff1a;6月3日到6月9日 反转字符串 l0rlen(s)-1while l<r:s[l],s[r]s[r],s[l]l1r-1反转字符串II reslist(s)for i in range(0,len(s),2*k):res[i:ik]res[i:ik][::-1]return "".join(res)替换数字 没有使用额外的空间 slist(input()) llen(s)-1 x[r,e,…

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

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

STM32F103C8T6 HAL库 USART1 DMA方式接收数据

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