js 【详解】异步

已于 2024-03-09 23:21:19 修改
阅读量441 收藏 8
点赞数 9
分类专栏： # JavaScript 文章标签： javascript
于 2024-03-09 08:25:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/136562732
版权

为什么需要使用异步？

  1. 减少等待时间：异步编程允许程序在等待某些操作（如网络请求或文件读取）完成时继续执行其他任务，而不是空等，这样可以显著减少等待时间。
  2. 提高响应速度：由于JavaScript是单线程的，同步代码可能会阻塞后续代码的执行，导致整个程序暂停等待。通过使用异步编程，可以避免这种阻塞，从而提高程序的响应速度。
  3. 提升性能：异步编程可以更有效地利用系统资源，因为它允许同时处理多个任务。这样不仅提高了程序的性能，也提升了用户体验。
  4. 避免界面卡顿：在前端开发中，如果长时间运行的任务阻塞了主线程，会导致用户界面无法响应用户操作，造成卡顿现象。异步编程可以将耗时任务放在后台运行，确保用户界面保持流畅。
  5. 支持并发操作：异步编程使得同时发起多个网络请求或同时处理多个I/O操作成为可能，这在现代Web应用中是非常常见的需求。
  6. 代码组织清晰：使用异步编程模式，如Promises和async/await，可以使代码更加模块化和易于理解，错误处理也更加直观。
  7. 适应现代Web API：现代浏览器提供的许多Web API都是基于异步编程设计的，如Fetch API、Web Workers等，使用异步编程可以更好地与这些API协同工作。

异步 vs 同步 的区别

  • 同步会阻塞代码执行
    在这里插入图片描述
    alert 会阻塞代码的执行，直到用户点击 alert 弹窗的确定按钮，才会打印 300
  • 异步不会阻塞代码执行
    在这里插入图片描述

异步的应用场景

  • 网络请求，如 ajax 图片加载
    在这里插入图片描述

在这里插入图片描述

  • 定时任务，如 setTimeout，setInterval

在这里插入图片描述
在这里插入图片描述

异步是怎么实现的？

  • 通过回调函数实现

但回调函数实现异步的方式，容易形成 回调地狱

在这里插入图片描述

  • 代码层层嵌套，难以阅读和维护。

为了解决回调地狱的问题，诞生了 Promise

Promise

将只能嵌套的回调函数，变成了可串联的，更易阅读和维护！
在这里插入图片描述
在这里插入图片描述

  • 避免了嵌套

更多详见 js【详解】Promise

朝阳39
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js之中的异步
A-Select °
03-31 129
异步 1.知道哪部分代码是异步的; 2.必须要知道异步程序之中的数据或者赋值的变量在哪里可用; js:单线程语言 上面一行代码不执行结束,下面一行代码不会执行; 单线程 多线程 js中存在很大需要长时间等待才会执行的代码; 异步:在js中需要消耗大量时间等待某些程序执行的时候,会让正常程序继续执行.耗时较长的程序等会执行.耗时较长的程序我们把它称之为异步程序; js设定的异步: 事件;...
js异步
springalsky@gmail.com
08-04 625
异步，通俗点说吧，给你一个工作，这份工作有几个任务，大家现在开始同时做，你做你的任务，我做我的任务，大家互不妨碍阻塞。异步执行的时间就是最后完成该工作花费时间最多的那位了，也就是求最大数。 同步呢？和异步就不一样了，给你几个任务，必须在前者执行完成之后才能轮到下一个任务开始。也就是一种完成-开始的逻辑关系，第一个人开展任务的时候会阻塞后一个人开始，最终所花费时间是所有执行时间的总和。 在js中
JavaScript异步编程详解
甜甜的博客
10-08 219
异步编程详解
JS中的异步详解
weixin_43634880的博客
03-14 3026
一：异步是什么？ 同步和异步是两种模式。 "同步模式"就是指后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。 "异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 通俗的理解异步任务，...
详解JavaScript异步编程之Promise
最新发布
流绪@微梦
01-24 986
JavaScript是⼀⻔典型的异步编程脚本语⾔，在编程过程中会⼤量的出现异步代码的编写，在JS的整个发展历程中，对异步编程的处理⽅式经历了很多个时代，其中最典型也是现今使⽤最⼴泛的时代，就是Promise对象处理异步编程的时代。
Javascript异步编程详解
02-26
Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）."异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，...
详解JavaScript 异步编程
10-15
JavaScript异步编程是JavaScript开发中不可或缺的一个重要概念，它允许代码在不阻塞主线程的情况下执行耗时操作，从而提高应用程序的响应性和用户体验。本文将深入探讨异步编程的原理、应用场景以及常见的实现方式。...
单线程JavaScript实现异步过程详解
10-15
然而，为了处理I/O操作、网络请求等耗时任务，JavaScript引入了异步编程的概念，使得程序能够在等待这些任务完成的同时继续执行其他代码。本文将深入探讨如何在单线程环境中实现异步执行。 首先，我们需要理解同步...
正则表达式 RegExp【详解】
热门推荐
朝阳39的博客
02-03 3万+
常用正则表达式大全https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html 验证保留两位小数的正整数或0 /^([1-9]\d*|0)(\.\d{1,2})?$/ 验证手机号码,如13908653654 /^(1[3|5|7|8][0-9]{9})$/ 验证固定号码，如010-86551122或01086551122 /^((0\d{2,3})[-]?)(\d{7,8})([-]?(\d{3,}))?$/ 验证电话号码—手.
js 【详解】闭包
朝阳39的博客
04-21 3万+
闭包的概念 如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包。 所以以下写法都是闭包 var a = 1; // 匿名的立即执行函数，因访问了全局变量a，所以也是一个闭包 (function test (){ alert(a); })() 本质上，JS中的每个函数都是一个闭包，因为每个函数都可以访问全局变量。 关于JS中的作用域，可以参考博客： https://blog.csdn.net/weixin_41192489/article/deta.
js 排序—— sort() 对普通数组、对象数组（单属性/多属性）排序
朝阳39的博客
12-19 2万+
目录 普通数组排序 获取最大值 对象数组排序——单属性排序 获取最大值——对象数组中的指定属性 对象数组排序——多属性 不传参数，默认按照字符编码的顺序进行排序（数字不会按大小排序！！！） var arr = ['General','Tom','Bob','John','Army']; var resArr = arr.sort(); console.log(resArr);//输出 ["Army", "Bob", "General", "John", "Tom"] var arr2.
js中for of遍历数组获取index的方法
朝阳39的博客
05-11 1万+
数组的 for... of 遍历本身获取不了 index，可以先将Array 转成 Map，再用 for... of 遍历 let arr = [ 'a', 'b', 'c' ]; for( let [ index, item ] of new Map( arr.map( ( item, index ) => [ index, item ] ) ) ) { console.log( index, item ); } 得到 0 "a" 1 "b" 2 "c" ...
js【详解】arr.splice() 数组拼接
朝阳39的博客
05-12 1万+
arr.splice() 的含义 splice的中文释义为“拼接”，arr.splice() 即剪切掉数组中一个连续的片段后，再拼接上一个新片段。 arr.splice() 的语法 let newArr = arr.splice(起始索引index, 删除的个数, 新增元素1, 新增元素2...) // 返回被删除元素组成的新数组 会改变原数组 第三个及之后的参数表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引的前面。 若未指定删除的个数，则从起始索引index到数.
js 混合排序（同时存在数字、字母、汉字等）
朝阳39的博客
05-14 1万+
若同时存在数字、字母、汉字等混合数据，默认的排序规则往往无法满足需求，具体的排序算法也需根据需求进行修改。 排序需求描述 【数字】按数值大小排序 【数字】在【字符串】前面 【非全汉字的字符串】在【全为汉字的字符串】的前面 【非全为汉字的字符串】从左到右依次比较字符，非汉字字符按Unicode 编码值排序，汉字按拼音首字母排序，汉字字符在非汉字字符的后面 【全为汉字的字符串】按拼音首字母排序 范例： // 原数组 let arr = ['王五', '9', 'a李四', 'abca', '
JavaScript 等待异步请求数据返回值后，继续执行代码 —— async await Promise的使用方法
朝阳39的博客
01-24 9763
需求 1. 访问百度地图API 获取指定行政区划的坐标 2. 根据行政区划的坐标，在百度地图上标注行政区划的名称 代码范例 （以在.vue文件中使用为例） mounted(){ // 调用方法——在百度地图上标注行政区划的名称 this.addRegionLabel('武汉市', '青山区') }, 在异步返回数据的方法前加 await 在内部存在 await 的方法前加 async // 添加行政区划文本标注 async addRegionLabel(city,...
js【详解】arr.sort()数组排序（内含十大经典排序算法的js实现）
朝阳39的博客
05-14 9323
arr.sort()默认按照Unicode编码，从小到大进行排序，会改变原数组 let arr = ["e", "b", "d", "a", "f", "c", 1, 10, 2, 12]; let result = arr.sort() arr =[1,10,12,2,"a","b","c","d","e","f"] result =[1,10,12,2,"a","b","c","d","e","f"] 存在的致命缺陷：并没有按数字的大小进行排序，通常无法满足我们对数组的排序需求！ 自定义排序
js 判断字符串是否包含中文，判断字符串是否全是中文，判断字符是否为中文
朝阳39的博客
05-13 8623
方式一 —— 根据Unicode 字符范围判断 let val = '中' if (val.charCodeAt() > 255) { console.log('传入的字符是中文') } else { console.log('传入的字符不是中文') } 方式二 —— 正则表达式 let val = '中' let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g") if (reg.test(val)) { consol.
vue 全局响应键盘按键/监听键盘事件（含 js 获取键盘keyCode值的方法）
朝阳39的博客
05-31 8536
监听键盘事件 方法一 document.addEventListener("keydown",function(e){ alert("您按下的按钮的keyCode为："+e.keyCode) }) 方法二 document.onkeydown = function (e) { // 方向键--上 if (e.keyCode == 38) { alert("按下了方向键--上") } // 方向键--下 if (e.keyC..
js【详解】arr.reduce() 数组缩减
朝阳39的博客
05-11 8354
reduce中文释义为“缩减”，arr.reduce() 即将数组中的每个值（从左到右）开始缩减，最终计算为一个值。若arr为空数组，当initialValue没有值时，会报错，但当initialValue有值时，不会报错。arr.reduce()的基础功能便是实现累积调用，所以常用于数组求和，数组求乘积。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值