js 【详解】异步

为什么需要使用异步?

  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

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

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

相关文章

【Web】浅聊Java反序列化之C3P0——URLClassLoader利用

目录 前言 C3P0介绍 回归本源——序列化的条件 利用链 利用链分析 入口——PoolBackedDataSourceBase#readObject 拨云见日——PoolBackedDataSourceBase#writeObject 综合分析 EXP 前言 这条链最让我眼前一亮的就是对Serializable接口的有无进行了一个玩&#xff0c…

Mybatis-plus连接多数据源操作(SQLServer、MySQL数据库)

Mybatis-plus连接多数据源操作&#xff08;SQLServer、MySQL数据库&#xff09; 一、依赖二、yml配置文件三、业务类四、测试 一、依赖 <!--mybatis多数据源--><dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spri…

采用 Amazon DocumentDB 和 Amazon Bedrock 上的 Claude 3 构建游戏行业产品推荐

前言 大语言模型&#xff08;LLM&#xff09;自面世以来即展示了其创新能力&#xff0c;但 LLM 面临着幻觉等挑战。如何通过整合外部数据库的知识&#xff0c;检索增强生成&#xff08;RAG&#xff09;已成为通用和可行的解决方案。这提高了模型的准确性和可信度&#xff0c;特…

Autosar教程-Mcal教程-GPT配置教程

3.3GPT配置、生成 3.3.1 GPT配置所需要的元素 GPT实际上就是硬件定时器,需要配置的元素有: 1)定时器时钟:定时器要工作需要使能它的时钟源 2)定时器分步:时钟源进到定时器后可以通过分频后再给到定时器 定时器模块选择:MCU有多个定时器模块,需要决定使用哪个定时器模块作…

21-Java观察者模式 ( Observer Pattern )

Java备忘录模式 摘要实现范例 观察者模式 ( Observer Pattern ) 常用于对象间存在一对多关系时&#xff0c;比如&#xff0c;当一个对象被修改时&#xff0c;需要自动通知它的依赖对象 观察者模式属于行为型模式 摘要 1. 意图 定义对象间的一种一对多的依赖关系&#xff…

给 spyter/all-spark-notebook 添加scala支持

spyter/all-spark-notebook默认没有安装scala notebook&#xff0c;需要手动添加。 你可以创建一个新的 Dockerfile&#xff0c;在其中添加你需要的配置和组件。以下是一个简单的例子&#xff1a; FROM jupyter/all-spark-notebook:x86_64-ubuntu-22.04 #冒号后可以是latest&a…

【漏洞复现】锐捷网络NBR700G 信息泄露

0x01 产品简介 锐捷网络NBR700G路由器是锐捷网络股份有限公司的一款无线路由设备。 0x02 漏洞概述 锐捷网络NBR700G路由器存在信息漏洞。未授权的攻击者可以通过该漏洞获取敏感信息。 0x03 测绘语句 fofa&#xff1a;body"系统负荷过高&#xff0c;导致网络拥塞&…

Mint_21.3 drawing-area和goocanvas的FB笔记(六)

FreeBASIC gfx 基本 graphics 绘图 一、旧故事 DOS时代PC技术将各类硬插卡限制在 640K到1MB的空间范围内&#xff0c;BIOS负责在相关位置写读测试卡的存在&#xff0c;那时期的Color Video在0xB800&#xff0c;Monochrome Video在0xB000&#xff0c;这是显卡的内存地址&#…

iOS17.4获取UDID安装mobileconfig描述文件失败 提示“安全延迟进行中”问题 | 失窃设备保护

iOS17.4这两天已经正式发布&#xff0c; 在iOS 17.4版本中新增了一个名为"失窃设备保护"的功能&#xff0c;并提供了一个"需要安全延迟"的选项。 iOS17.4获取UDID安装mobileconfig描述文件失败 提示“安全延迟进行中”问题 | 失窃设备保护 当用户选择启用…

美洲狮优化算法(Puma Optimizar Algorithm ,POA)求解机器人栅格地图最短路径规划(提供MATLAB代码)

一、美洲狮优化算法 美洲狮优化算法&#xff08;Puma Optimizar Algorithm &#xff0c;POA&#xff09;由Benyamin Abdollahzadeh等人于2024年提出&#xff0c;其灵感来自美洲狮的智慧和生活。在该算法中&#xff0c;在探索和开发的每个阶段都提出了独特而强大的机制&#xf…

【LeetCode: 212. 单词搜索 II - dfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

华为OD机试C卷“跳步-数组”Java解答

描述 示例 算法思路1 不断移动数组将元素删去&#xff08;并未彻底删除&#xff0c;而是将数字元素前移实现“伪删除”&#xff09;这样删除元素的位置就呈现一定规律&#xff0c;详细见下图&#xff08;潦草的画&#xff09; 答案1 import java.util.*;public class Main {…

【MySql学习之路】window环境下MySql安装和安装过程中出现的问题

environment:windows software:mysql 本文主要分享mysql关系型数据库在干净的环境下,第一次安装以及在安装过程中出现的常见问题和解决方法。目前官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的。很多人下了zip格式的解压发现没有setup.exe,面对一堆文件无从…

最全NVIDIA Jetson开发板参数配置和购买指南

NVIDIA开发的GPU不仅在电脑显卡领域占据大量份额&#xff0c;在嵌入式NVIDIA的Jeston系列开发板也近乎是领先的存在&#xff0c;特别是NVIDIA Jeston系列开发板在算力和成本的平衡上都要优于其他厂家&#xff0c;性价比很高&#xff0c;设备体积小。本博文旨在给采购NVIDIA Jes…

【LeetCode每日一题】299. 猜数字游戏

文章目录 [299. 猜数字游戏](https://leetcode.cn/problems/bulls-and-cows/)思路&#xff1a;代码&#xff1a; 299. 猜数字游戏 思路&#xff1a; 遍历两个字符串 secret 和 guess&#xff0c;若字符既在相同位置上又相等&#xff0c;则位置和数字都正确&#xff0c;对应的 …

宝塔一键迁移报错创建失败问题完美解决

很多站长朋友在使用宝塔面板迁移的时候总是出错&#xff0c;如图&#xff1a; 遇到这样的问题不要慌&#xff0c;我们已经完美处理&#xff0c;详细解决教程&#xff1a;宝塔一键迁移报错问题完美解决教程

微信小程序跳转到其他小程序

有两种方式&#xff0c;如下&#xff1a; 一、appid跳转 wx.navigateToMiniProgram({appId: 目标小程序appid,path: 目标小程序页面路径,//不配的话默认是首页//develop开发版&#xff1b;trial体验版&#xff1b;release正式版envVersion: release, success(res) {// 打开成功…

JDBC的学习记录

JDBC就是使用java语言操作关系型数据库的一套API。 JDBC&#xff08;Java Database Connectivity&#xff09;是Java语言中用于连接和操作数据库的一种标准接口。它提供了一组方法和类&#xff0c;使Java程序能够与各种不同类型的关系型数据库进行交互。 JDBC的主要功能包括建…

Angular基础---HelloWorld---Day3

文章目录 0.ng-model 的几种不同的class属性1.ng-model 的引用与属性的调用2.表单验证&#xff1a; (模版引用变量、ngModel 、ngif一起使用&#xff09;3.根据class属性的值ng-invalid &#xff0c;设置动态变化的样式 0.ng-model 的几种不同的class属性 引用ng-model 元素的c…

分布式执行引擎ray入门--(3)Ray Train

Ray Train中包含4个部分 Training function: 包含训练模型逻辑的函数 Worker: 用来跑训练的 Scaling configuration: 配置 Trainer: 协调以上三个部分 Ray TrainPyTorch 这一块比较建议直接去官网看diff&#xff0c;官网色块标注的比较清晰&#xff0c;非常直观。 impor…