js理解异步编程和回调

news2024/10/7 10:18:02

什么是异步

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

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

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

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

但是在浏览器中不同,浏览器只有一条主线,它沿着主线按部就班的执行程序,在渲染一个网页时,总是自上而下的执行 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.coloradmin.cn/o/1806125.html

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

相关文章

leetcode(力扣)第15题-三数之和---使用c语言双指针法,二级指针的应用

题目: 15. 三数之和 - 力扣(LeetCode) 编写过程的问题: 记住线索 1、对数组使用快排排序;2、固定 a 对 b、c 使用双指针;3、注意去重问题。函数返回值的类型。{1,2,-3}。结果作为…

3038. 相同分数的最大操作数目 I(Rust模拟击败100%Rust用户)

题目 给你一个整数数组 nums ,如果 nums 至少 包含 2 个元素,你可以执行以下操作: 选择 nums 中的前两个元素并将它们删除。 一次操作的 分数 是被删除元素的和。 在确保 所有操作分数相同 的前提下,请你求出 最多 能进行多少次…

406. 根据身高重建队列(中等)

406. 根据身高重建队列 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转:406. 根据身高重建队列 2.详细题解 做一道题之前先静心,默念三遍一切反动派都是纸老虎。已知一个队列,队列中每个数据表示一个属性&#xf…

百度高级项目经理洪刘生受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 百度在线网络技术(北京)有限公司IDG智能驾驶业务部高级项目经理洪刘生先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾,演讲议题为“互联网PMO赋能战略项目集管理实战分享”。大会将于6月29-30日在北京举办…

【优选算法】优先级队列 {优先级队列解决TopK问题,利用大小堆维护数据流的中位数}

一、经验总结 优先级队列(堆),常用于在集合中筛选最值或解决TopK问题。 提示:对于固定序列的TopK问题,最优解决方案是快速选择算法,时间复杂度为O(N)比堆算法O(NlogK)更优;而对于动态维护数据流…

Invalid JSON text:“Invalid value.“ at position 0 in value for column ‘user.info

你们好,我是金金金。 场景 我正在练习mybatis-plus,在插入一条数据的时候报错了,错误信息如上图 排查 排查之前我先贴一下代码 以下为数据库字段类型 在插入的过程中报错:Data truncation: Invalid JSON text: "Invalid val…

后台管理系统开源鉴赏

项目合集 开源仓库组件库vbenjs/vue-vben-adminAnt-Design-Vueflipped-aurora/gin-vue-adminelement-pluschuzhixin/vue-admin-betterelement-pluspure-admin/vue-pure-adminelement-plushonghuangdc/soybean-adminNaive UIHalseySpicy/Geeker-Adminelement-plusjekip/naive-u…

实现手机空号过滤或手机号码有效性验证

手机空号过滤或手机号码有效性验证通常涉及使用专门的API接口来查询手机号码的状态。这些API接口通常由第三方服务提供商提供,它们会与电信运营商合作或利用自己的数据库来验证手机号码是否真实存在、是否已被分配、是否处于空号状态等。 以下是一些步骤和考虑因素…

海洋日特别活动—深海来客——可燃冰

深海中有一种神奇的物质,似冰又不是冰。 别看它其貌不扬,但本领不小,遇火即燃,能量巨大,可谓是能源家族的新宠。它就是被国务院正式批准列为我国第173个矿种的“可燃冰”! 可燃冰到底是个啥?它…

【C++】——Stack与Queue(含优先队列(详细解读)

前言 之前数据结构中是栈和队列,我们分别用的顺序表和链表去实现的,但是对于这里的栈和队列来说,他们是一种容器,更准确来说是一种容器适配器 ✨什么是容器适配器? 从他们的模板参数可以看出,第二个参数模…

如何 Logrus IT 的质量评估门户帮助提升在线商店前端(案例研究)

在当今竞争激烈的电子商务环境中,一个运作良好的在线店面对商业成功至关重要。然而,确保目标受众获得积极的用户体验可能是一项挑战,尤其是在使用多种语言和平台时。Logrus IT的质量评估门户是一个强大的工具,可帮助企业简化内容和…

LLVM Cpu0 新后端3

想好好熟悉一下llvm开发一个新后端都要干什么,于是参考了老师的系列文章: LLVM 后端实践笔记 代码在这里(还没来得及准备,先用网盘暂存一下): 链接: https://pan.baidu.com/s/1yLAtXs9XwtyEzYSlDCSlqw?…

MacOS中Latex提示没有相关字体怎么办

在使用mactex编译中文的时候,遇到有些中文字体识别不到的情况,例如遇到识别不到Songti.ttc。其实这个时候字体是在系统里面的,但是只不过是latex没有找到正确的字体路径。 本文只针对于系统已经安装了字体库并且能够用find命令搜到&#xff0…

Effective Java 1 用静态工厂方法代替构造器

知识点上本书需要会Java语法和lang、util、io库,涉及concurrent和function包。 内容上主要和设计模式相关,代码风格力求清晰简洁,代码尽量复用,组件尽量少依赖,错误尽早发现。 第1个经验法则:用静态工厂方…

rust学习(字节数组转string)

最新在写数据传输相关的操作,发现string一个有趣的现象,代码如下: fn main() {let mut data:[u8;32] [0;32];data[0] a as u8;let my_str1 String::from_utf8_lossy(&data);let my_str my_str1.trim();println!("my_str len is…

基于JSP技术的社区生活超市管理系统

你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:MyEclipse开发环境、Tomcat服务器 系统展示 首页 管理员功能模块…

两款 IntelliJ IDEA 的 AI 编程插件

介绍两款 IntelliJ IDEA 的 AI 编程插件:通义灵码和 CodeGeeX。 通义灵码 这是由阿里推出的一个基于通义大模型的 AI 编码助手。 它提供了代码智能生成、研发智能问答等功能。通义灵码经过海量优秀开源代码数据训练,可以根据当前代码文件及跨文件的上下…

Spring运维之boo项目表现层测试匹配响应执行状态响应体JSON和响应头

匹配响应执行状态 我们创建了测试环境 而且发送了虚拟的请求 我们接下来要进行验证 验证请求和预期值是否匹配 MVC结果匹配器 匹配上了 匹配失败 package com.example.demo;import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Auto…

Golang | Leetcode Golang题解之第129题求根节点到叶节点数字之和

题目: 题解: type pair struct {node *TreeNodenum int }func sumNumbers(root *TreeNode) (sum int) {if root nil {return}queue : []pair{{root, root.Val}}for len(queue) > 0 {p : queue[0]queue queue[1:]left, right, num : p.node.Left, …

C++使用thread_local实现每个线程下的单例

对于一个类,想要在每个线程种有且只有一个实例对象,且线程之间不共享该实例,可以按照单例模式的写法,同时使用C11提供的thread_local关键字实现。 在单例模式的基础上,使用thread_local关键字修饰单例的instance&…