当前位置: 首页 > news >正文

JavaScript中的Concurrency并发:异步操作下的汉堡制作示例

这篇文章想讲一下JavaScript中同步与异步操作在一个简单的示例中的应用。我们将以制作汉堡为例,展示如何使用同步方法、回调函数(callbacks)和Promise与async/await来实现该过程。

Let’s imagine we’re trying to make a burger:

1. Get ingredients 获取原料(比如beef)

2. Cook the beef  烹饪牛肉

3. Get burger buns 获得面包片

4. Put the cooked beef between the buns 把做好的牛肉放进面包片

5. Serve the burger 提供burger

接下来我们用不同方法来演示这几个步骤的实现。

1. 同步方法

首先,我们来看一个使用同步方法实现汉堡制作过程的示例:

function getBeef() {console.log("Step 1: Getting beef");return "beef";
}function cookBeef(beef) {console.log("Step 2: Cooking beef");if (beef === "beef") return "patty";
}function getBuns() {console.log("Step 3: Getting buns");return "buns";
}function putBeefBetweenBuns(buns, patty){if (buns === "buns" && patty === "patty") {console.log("Step 4: Putting beef patty between buns");return "burger"}
}function makeBurger() {const beef = getBeef();const patty = cookBeef(beef);const buns = getBuns();const burger = putBeefBetweenBuns(buns, patty);return burger;
}function serve(burger){console.log("Finally: " + burger + " is served!")
}const burger = makeBurger();
serve(burger);

在这个示例中,我们使用了同步方法来实现汉堡制作的各个步骤。这种方法非常简单,没什么可以讲的,但在处理复杂任务时可能会受限,因为它不支持异步操作。

2. 回调函数(Callbacks)

接下来,我们来看一个使用回调函数实现汉堡制作过程的示例:

function getBeef(cb) {setTimeout(() => {console.log("Step 1: Getting beef");const beef = "beef";cb(beef);}, 1000);
}function cookBeef(beef, cb) {setTimeout(() => {if(beef === "beef"){console.log("Step 2: Cooking beef");const patty = "patty"cb(patty)}}, 1000)
}function getBuns(cb) {setTimeout(() => {console.log("Step 3: Getting buns");const buns = "buns";cb(buns)}, 1000)
}    function putBeefBetweenBuns(buns, patty, cb) {setTimeout(() => {if (buns === "buns" && patty === "patty") {console.log("Step 4: Putting beef patty between buns");const burger = "burger"cb(burger)}}, 1000);
}//关键部分
function makeBurger(cb) {getBeef(function(beef) {cookBeef(beef, function(patty)getBuns(function(buns) {putBeefBetweenBuns(buns, patty, function(burger) {cb(burger);});});});
});
}function serve(burger){
console.log("Finally: Burger is served!")
}// Make and serve the burger
makeBurger((burger) => {
serve(burger)
})

为了理解上面的例子,先说一下 setTimeout  函数,setTimeout 是一个 JavaScript 函数,它用于在指定的时间延迟后执行某个函数或代码片段。setTimeout 本身不会阻塞代码执行,它会将提供的回调函数(需要延迟执行的代码)放入一个队列中,在计时器结束后将其放入事件循环,等待执行。让我给你一个简单的例子来解释 setTimeout 的工作原理:

console.log("Before setTimeout");setTimeout(() => {console.log("Inside setTimeout");
}, 2000);console.log("After setTimeout");

执行这段代码时,你会发现输出顺序如下:

Before setTimeout
After setTimeout
大约 2 秒后,会出现:Inside setTimeout

在第二个制作汉堡的示例中,我们使用回调函数来处理异步操作。

回调函数就是一个作为参数传递给另一个函数的函数。当被调用函数完成其操作后,它会执行传递的回调函数。在这个汉堡制作示例中,我们将回调函数用于每个步骤的完成通知。

下面是回调函数示例的详细解释:

  1. makeBurger() 函数被调用,它首先调用 getBeef() 函数,并将一个匿名回调函数作为参数传递。这个回调函数接收一个参数 beef
  2. getBeef() 函数执行异步操作(使用 setTimeout() 模拟),当操作完成后,它调用传递的回调函数,并将 beef 作为参数传递。
  3. 回调函数执行,并使用 beef 参数调用 cookBeef() 函数。同样,我们为 cookBeef() 函数传递一个匿名回调函数,接收一个参数 patty
  4. cookBeef() 函数执行异步操作,当操作完成后,它调用传递的回调函数,并将 patty 作为参数传递。
  5. 回调函数执行,并使用 patty 参数调用 getBuns() 函数。我们为 getBuns() 函数传递一个匿名回调函数,接收一个参数 buns
  6. getBuns() 函数执行异步操作,当操作完成后,它调用传递的回调函数,并将 buns 作为参数传递。
  7. 回调函数执行,并使用 bunspatty 参数调用 putBeefBetweenBuns() 函数。我们为 putBeefBetweenBuns() 函数传递一个匿名回调函数,接收一个参数 burger
  8. putBeefBetweenBuns() 函数执行异步操作,当操作完成后,它调用传递的回调函数,并将 burger 作为参数传递。
  9. 回调函数执行,并将 burger 参数传递给 serve() 函数。
  10. serve() 函数打印消息,表明汉堡已经制作完成并上菜。

在这个过程中,我们可以看到回调函数在每个异步操作完成后执行,并将结果传递给下一个操作。这使我们能够以异步方式处理整个汉堡制作过程。然而,这种方法的缺点是回调函数可能导致嵌套层数过多,导致代码可读性降低。甚至不仔细看很久都看不懂的程度,所以别担心如果你看不懂这个代码,JavaScript本身语法和可读性可理解性我觉得就是垃圾至极,看不懂别有心理负担,反正我们要避免类似上面的这种Callback Hell, 我们最常用的也是下面的这种方法:

3. Promise 与 async/await

function getBeef() {return new Promise((res) => {setTimeout(() => {console.log("Step 1: Getting beef");res("beef");}, 1000);});
}function cookBeef(beef) {return new Promise((res, rej) => {setTimeout(() => {if (beef === "beef"){console.log("Step 2: Cooking beef");res("patty");}else rej("no beef available");}, 1000);});
}function getBuns() {return new Promise((res) => {setTimeout(() => {console.log("Step 3: Getting buns");res("buns");}, 1000);});
}function putBeefBetweenBuns(buns, patty) {return new Promise((res, rej) => {setTimeout(() => {if (buns !== "buns") rej("no buns");else if (patty !== "patty") rej("no patty");else{console.log("Step 4: Putting beef patty between buns");res("burger");}    }, 1000);});
}//Promise链式调用
getBeef().then(beef => {return Promise.all([cookBeef(beef),getBuns()])
}).then(ingredients => {const [patty, buns] = ingredients;return putBeefBetweenBuns(buns, patty)
}).then(burger => {console.log("Finally: " + burger + " is served!")
})//async/await
async function makeBurger(){const beef = await getBeef();const patty = await cookBeef(beef);const buns = await getBuns();const burger = await putBeefBetweenBuns(buns, patty);return burger
}
makeBurger()

在这个示例中,我们使用了Promise的链式调用(用then关键字)以及async/await来处理异步操作。

1.对于Promise链式调用,通过 .then() 方法将异步操作链接在一起。在这个例子中,首先调用 getBeef(),然后在 .then() 中处理获得的 beef。接着,我们使用 Promise.all()cookBeef(beef)getBuns() 一起执行,等待它们都完成后,再处理它们的结果。最后,我们将 pattybuns 放在一起组成 burger。这种写法的优点是:它允许你以更加清晰的方式组织异步操作。但是,当异步操作非常多时,这种写法可能导致 .then() 链过长,从而使代码变得难以阅读和维护。

2.对于async/await,它允许你以更接近同步代码的方式编写异步操作。在这个例子中,我们使用 await 等待每个异步操作完成,并将结果赋值给相应的变量。这样,代码看起来就像是同步执行的,但实际上仍然是异步的。这种写法的优点是:它使代码更加简洁和易于阅读。此外,它可以让你更容易地处理错误,因为你可以直接使用 try-catch 语句捕获异步操作中的异常。

这两种写法都用于处理异步操作,它们的主要区别在于书写风格和可读性。Promise 链式调用更注重将操作链接在一起,而 async/await 更侧重于使代码看起来像同步执行。

总结

在这篇博客中,我们比较了在JavaScript中实现同步和异步操作的三种方法:同步方法、异步中的回调函数和Promise链式调用与async/await。每种方法都有其优缺点。同步方法易于理解,但不支持异步操作;回调函数支持异步操作,但可读性差;而Promise与async/await既支持异步操作,又具有良好的可读性,因此更推荐这两种写法。

相关文章:

JavaScript中的Concurrency并发:异步操作下的汉堡制作示例

这篇文章想讲一下JavaScript中同步与异步操作在一个简单的示例中的应用。我们将以制作汉堡为例,展示如何使用同步方法、回调函数(callbacks)和Promise与async/await来实现该过程。 Let’s imagine we’re trying to make a burger: 1. Get …...

微信小程序开发一个多少钱

小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一。在选择小程序开发服务时,了解开发费用如何计算、影响价格的因素以及如何降低成本等方面的知识,可…...

Python基础入门(2)—— 什么是控制语句、列表、元组和序列?

文章目录 01 | 🚄控制语句02 | 🚅列表03 | 🚈元组04 | 🚝序列05 | 🚞习题 A bold attempt is half success. 勇敢的尝试是成功的一半。 前面学习了Python的基本原则、变量、字符串、运算符和数据类型等知识&#xff0c…...

计算机专业大一的一些学习规划建议!

大家好,我是小北。 五一嗖的一下就过啦~ 对于还在上学的同学五一一过基本上意味着这学期过半了,很多大一、大二的同学会有专业分流、转专业等事情。 尤其是大二的时候,你会发现身边有些同学都加入各种实验室了,有忙着打ACM、学生…...

万万没想到在生产环境翻车了,之前以为很熟悉 CountDownLatch

前言 需求背景 具体实现 解决方案 总结 前言 之前我们分享了CountDownLatch的使用。这是一个用来控制并发流程的同步工具,主要作用是为了等待多个线程同时完成任务后,在进行主线程任务。然而,在生产环境中,我们万万没想到会…...

Springboot整合Jasypt实战

Springboot整合Jasypt实战 引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.5</version> </dependency>配置jasypt # 配置jasypt相关信息…...

计算机网络笔记:DNS域名解析过程

基本概念 DNS是域名系统&#xff08;Domain Name System&#xff09;的缩写&#xff0c;也是TCP/IP网络中的一个协议。在Internet上域名与IP地址之间是一一对应的&#xff0c;域名虽然便于人们记忆&#xff0c;但计算机之间只能互相认识IP地址&#xff0c;域名和IP地址之间的转…...

C语言函数大全-- s 开头的函数(4)

C语言函数大全 本篇介绍C语言函数大全-- s 开头的函数&#xff08;4&#xff09; 1. strdup 1.1 函数说明 函数声明函数功能char * strdup(const char *s);用于将一个以 NULL 结尾的字符串复制到新分配的内存空间中 注意&#xff1a; strdup() 函数返回指向新分配的内存空间…...

Linux常见指令 (2)

Linux常见指令 ⑵ 补充man描述:用法:例子 echo描述:用法:例子 echo 字符串例子 echo 字符串 > 文件例子 追加重定向(>>)例子 输出重定向(>)来创建文件 && (>)来清空文件 cat描述:用法:例子 cat && cat 文件补充:例子 cat 文件 && cat &…...

shell脚本4

字符串变量 格式介绍&#xff1a;单引号 varabc 双引号 var"abc" 不使用引号 varabc 区别&#xff1a;单引号&#xff0c;原样输出&#xff0c;不会解析里面的变量 双引号&#xff0c;会解析变量&#xff0c;并且可以使用子双引号&#xff0c;需要转…...

递归思路讲解

最近刷到了树这一模块的算法题&#xff0c;树相关的算法题几乎都是用递归来实现的&#xff0c;但递归的思路却有点抽象&#xff0c;每次遇到递归&#xff0c;都是通过递归来深度或广度地遍历树&#xff0c;但对于递归遍历树的遍历路线&#xff0c;却有点抽象难懂&#xff0c;不…...

基于R语言APSIM模型高级应用及批量模拟

目录 专题一 APSIM模型应用与R语言数据清洗 专题二 APSIM气象文件准备与R语言融合应用 专题三 APSIM模型的物候发育和光合生产模块 专题四 APSIM物质分配与产量模拟 专题五 APSIM土壤水平衡模块 专题六 APSIM土壤碳、氮平衡模块 专题七 APSIM农田管理模块与情景模拟 专…...

Hyperf中的其它事项

Hyperf中的其它事项 关于 Hyperf 其它的内容我们就不多说了&#xff0c;毕竟框架这东西用得多了自然也就熟悉了。最重要的是——我的水平还不足以去深入地分析这个框架&#xff01; 好吧&#xff0c;其它的功能大家可以去官方文档详细了解&#xff0c;毕竟国人自己做的框架&a…...

【技术选型】Elasticsearch 和Solr那个香?

我们为什么在这里&#xff1f;我存在的目的是什么&#xff1f;我应该运动还是休息并节省能量&#xff1f;早起上班或晚起并整夜工作&#xff1f;我应该将炸薯条和番茄酱或蛋黄酱一起吃吗&#xff1f; 这些都是古老的问题&#xff0c;可能有也可能没有答案。其中一些是非常困难或…...

4面美团测试工程师,因为这个小细节,直接让我前功尽弃.....

说一下我面试别人时候的思路 反过来理解&#xff0c;就是面试时候应该注意哪些东西&#xff1b;用加粗部分标注了 一般面试分为这么几个部分&#xff1a; 一、自我介绍 这部分一般人喜欢讲很多&#xff0c;其实没必要。大约5分钟内说清楚自己的职业经历&#xff0c;自己的核…...

数据恢复软件EasyRecovery16下载安装步骤教程

EasyRecovery16是一款专业好用的数据恢复软件&#xff0c;软件提供了向导式的操作向导&#xff0c;可以有效地恢复电脑或者移动存储设备中丢失的各种文件&#xff0c;包括删除的文件、格式化丢失的文件和清空回收站的数据!千呼万唤始出来&#xff0c;大家期盼许久的EasyRecover…...

Springboot 自定义缓存配置 CacheManager 及redis集成

目录 前言 集成 maven依赖 CacheManagerConfig配置 redis配置 使用 Springboot 集成使用缓存 Cacheable CacheEvict 前言 现有项目中经常遇到的缓存集成问题&#xff0c;Springboot提供了统一的接口抽象与缓存管理器&#xff0c;可集成多种缓存类型&#xff0c;如 Co…...

JS 中七个改变原数组的方法

目录 一、push 二、pop 三、unshift 四、shift 五、splice 六、sort 七、reverse 一、push 在数组的尾部添加元素&#xff0c;并返回新的长度。 let arr [1] arr.push(2) console.log(arr) // [1, 2] 二、pop 删除数组最后面一个元素、并返回删除的元素。 let arr [1, …...

【笔试强训选择题】Day7.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录…...

Vue电商项目--axios二次封装

postman测试接口 刚刚经过postman工具测试&#xff0c;发现接口果然发生了改变。 新的接口为http://gmall-h5-api.atguigu.cn 如果服务器返回的数据code字段200&#xff0c;代表服务器返回数据成功 整个项目&#xff0c;接口前缀都有/api字样 axios二次封装 XmlHttpRequ…...

人生四维度

人生四维度 不是有钱了就成功&#xff0c;你知道&#xff1b;人生的成功不止一种&#xff0c;你也知道。但成功还有哪种&#xff1f;你知道吗&#xff1f; 如果把人生的体验展开&#xff0c;我们可以得到四个维度&#xff0c;高度、深度、宽度和温度。 财富、权力、影响力 构…...

Python 调用 MessageBeep 播放系统音效

Python 调用 MessageBeep 播放 Windows 系统提示声音 Windows API 函数 "MessageBeep" 介绍 "Windows API MessageBeep"是一个用于发出系统提示音效的函数。它可以向用户发出一种预定义的声音&#xff0c;以指示事件的发生或某个条件的满足。例如&#xf…...

废物,我TMD一个985却斗不过专科生(大厂自动化测试2年被裁)

前言 看到标题&#xff0c;可能很多读者朋友恐怕又要骂我了&#xff0c;985这个特殊的字眼也确实异常晃眼&#xff0c;实际上现在985&#xff0c;211也越来越多&#xff0c;它能代表你能够进入到更高的平台&#xff0c;拿到“高级工厂”的入场券&#xff0c;但并不意味着你会成…...

p70 内网安全-域横向内网漫游 Socks 代理隧道技术(NPS、FRP、CFS 三层内网漫游)

数据来源 本文仅用于信息安全学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 ​ 必要基础知识点&#xff1a; 内外网简单知识内网 1 和内网 2 通信问题正向反向协议通…...

第三十二章 Unity Mecanim动画系统(上)

在上一章节中&#xff0c;我们介绍了Unity的旧版动画系统&#xff0c;本章节来介绍新版的Mecanim动画系统。新版的Mecanim动画系统实际是对旧版动画系统的升级。新版的Mecanim动画系统仍然是建立在动画片段的基础上的&#xff0c;只不过它给我们提供了一个可视化的窗口来编辑动…...

第二章 集合

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…...

这一篇Databinding应该可以帮助迅速上手吧

Databinding使用篇&#xff08;迅速上手&#xff09; 使用前需要在模块级别的build.gradle里面的android闭包里添加&#xff1a; dataBinding{enabled true}接着在layout文件中按下Alt 回车&#xff0c; 将布局转换成data binding layout即可&#xff0c;此时编译就会生成对…...

【PHP在线定制商城网站源码V3.0】开源的DIY在线定制商城系统+在线礼品定制

源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/87637177 PHP在线定制商城网站源码&#xff0c;免费开源、免费下载。本商城基于mycncart开发。安装成功后即可浏览&#xff0c;你可以在后台->安装扩展功能上传安装插件&#xff0c;在代码调整中点击刷…...

cout源码浅析

目录 cout源码浅析 那么对于没有定义在这之中的要怎么办呢&#xff1f; 实际使用 结语 首先来看我从cplusplus中截取的这张图&#xff1a; 注意最下面这一行字。cout其实是ostream的一个标准对象object。而上面则演示了一些继承关系。 好的&#xff0c;理解了之后&#xf…...

发送Ajax get请求详解

发送AJAX get请求&#xff0c;前端代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>ajax get请求</title> </head> <body> <script type"text/java…...

上海网站建设服/google官网注册

“可以直接从中专升到本科吗&#xff1f;”不少人会有这种疑问&#xff0c;那这种情况可能吗&#xff1f;其实是不太现实的&#xff0c;大部分的中专生&#xff0c;一般都是因为学习成绩一般&#xff0c;只能一步一个脚印的慢慢提升自己的学历&#xff0c;从中专-大专-本科。之…...

馆陶企业做网站推广/关键词排名优化易下拉技巧

1、启动一个WEB项目的时候&#xff0c;WEB容器会去读取它的配置文件web.xml&#xff0c;读取<listener>和<context-param>两个结点。 2、紧急着&#xff0c;容创建一个ServletContext&#xff08;servlet上下文&#xff09;&#xff0c;这个web项目的所有部分都将…...

java ee只是做网站吗/查询网站

8 分钟入门 K8s | 详解容器基本概念 https://www.zhihu.com/question/37498459/answer/826736487 Docker 和 Kubernetes学习&#xff1a;Docker 和 Kubernetes 从听过到略懂&#xff1a;给程序员的旋风教程 https://1byte.io/developer-guide-to-docker-and-kubernetes/...

厦门网站建设外包维护/百度云资源共享

2019独角兽企业重金招聘Python工程师标准>>> 准备工作3个虚拟机节点的构成如下 &#xff1a;安装步骤操作过程1、安装包已经上传至其中1个节点。 2、解压缩安装包 命令&#xff1a;unzip rocketmq-all-4.0.0-incubating-bin-release.zip 解压缩之后如下&#xff1a;…...

dw中旅游网站怎么做/网站制作大概多少钱

看到oracle官方文档说oracle 11g dataguard在物理standby机器上出于open状态也可以应用redo,所以就在本地试验了下,确实如此,这样既可以应用redo也可以进行数据查询和数据库的备份.既解决了数据的容灾也解决了主数据库的压力.Oracle dataguard 简介 Dataguard分为2类:物理stan…...

湖南网站开发/网络推广外包流程

最近在做的项目有一项需要耗时任务在后台运行的功能&#xff0c;虽然PHP并不是非常适合做常驻后台的守护进程&#xff0c;但是由于项目主要代码都是基于PHP实现&#xff0c;如果运行在后台的守护进程改换别的语言会非常不方便。所以不可避免会涉及到Web端和Daemon部分的通信&am…...