目录
1。同步编程:一次
2。异步编程:不要等待
示例setTimeout (async):
异步代码在JavaScript中的工作方式
fetch的示例(使用承诺):
async/await相同:
关键差异摘要
底线
首页 web前端 js教程 JavaScript中同步编程和异步编程有什么区别?

JavaScript中同步编程和异步编程有什么区别?

Aug 04, 2025 pm 03:41 PM
编程

同步编程一次执行任务一个,阻止进一步执行,直到当前任务完成为止,这可以在长期运行过程中冻结UI; 2。异步编程允许JavaScript在等待诸如API呼叫或文件读取之类的慢速任务时继续执行其他代码。 3。关键区别在于同步代码正在阻止和线性,而异步代码是非阻止的,并且可以启用响应能力,这对于在JavaScript应用程序中的性能至关重要。

JavaScript中同步编程和异步编程有什么区别?

JavaScript中同步编程和异步编程之间的主要区别取决于如何随着时间的推移执行和处理任务

JavaScript中同步编程和异步编程有什么区别?

1。同步编程:一次

在同步代码中,每个操作都等待前一个操作在继续之前完成。这是JavaScript运行的默认方式 - 它在线执行代码,逐行执行。

例如:

JavaScript中同步编程和异步编程有什么区别?
 console.log(“ first”);
console.log(“第二”);
console.log(“第三”);

输出:

第一的
第二
第三

这似乎很简单,但是当您长期运行任务(例如阅读文件或提出网络请求)时会出现问题。如果JavaScript在执行其他操作之前等待每个任务完成,则整个页面将冻结- 这对用户体验不利。

JavaScript中同步编程和异步编程有什么区别?

2。异步编程:不要等待

异步编程让JavaScript开始任务,并在等待结果时继续处理其他事情。一旦任务完成,它就可以返回它。

这对于这样的事情至关重要:

  • 从API获取数据
  • 读取文件
  • 设置计时器

示例setTimeout (async):

 console.log(“ first”);
settimeout(()=> console.log(“ second”),1000);
console.log(“第三”);

输出:

第一的
第三
第二

即使setTimeout是第二次写的,它也是由于异步而运行的,但JavaScript不再等待1秒的延迟。当计时器结束时,它立即登录“第三”,然后将“第二”登录。

异步代码在JavaScript中的工作方式

JavaScript使用一些关键机制来处理异步操作:

  • 事件循环:检查呼叫堆栈和任务队列,并在堆栈清晰时运行代码。
  • 回调函数:将函数传递为以后运行的参数(较旧样式)。
  • 承诺:处理异步逻辑的更好方法,避免“回调地狱”。
  • 异步/等待:句法糖超过使异步代码看起来同步的承诺。

fetch的示例(使用承诺):

 fetch('https://api.example.com/data')
  。
  。
  .catch(error => console.error(error));

console.log(“请求已发送”);

数据可能需要一些时间来加载,但是"Request sent"立即出现 - 程序不会阻止。

async/await相同:

异步函数getData(){
  尝试 {
    const响应=等待提取('https://api.example.com/data');
    const data =等待响应.json();
    console.log(data);
  } catch(错误){
    Console.Error(错误);
  }
}

在这里, await暂停该功能,而不是整个程序。其余代码可以继续运行。

关键差异摘要

特征 同步 异步
执行 逐条线路,阻塞 非障碍,任务在后台运行
表现 如果慢,可以冻结UI 保持应用响应良好
用例 简单,快速操作 API,文件I/O,计时器
代码复杂性 易于读/写 稍复杂,但可以管理
错误处理 try/catch try/catch (与异步/等待),. .catch()

底线

  • 同步=逐步,一次。
  • 异步=启动某件事,不要等待,以后处理结果。

JavaScript是单线程,因此异步编程对于性能和响应性至关重要,尤其是在Web浏览器和Node.js中。

基本上,如果您要处理需要时间(例如加载数据)的任何内容,则应使用异步模式。否则,您的应用会感到缓慢或反应迟钝。

以上是JavaScript中同步编程和异步编程有什么区别?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

Rimworld Odyssey温度指南和Gravtech
1 个月前 By Jack chen
初学者的Rimworld指南:奥德赛
1 个月前 By Jack chen
PHP变量范围解释了
3 周前 By 百草
撰写PHP评论的提示
3 周前 By 百草
在PHP中评论代码
3 周前 By 百草

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Laravel 教程
1603
29
PHP教程
1508
276
VSCODE设置。JSON位置 VSCODE设置。JSON位置 Aug 01, 2025 am 06:12 AM

settings.json文件位于用户级或工作区级路径,用于自定义VSCode设置。1.用户级路径:Windows为C:\Users\\AppData\Roaming\Code\User\settings.json,macOS为/Users//Library/ApplicationSupport/Code/User/settings.json,Linux为/home//.config/Code/User/settings.json;2.工作区级路径:项目根目录下的.vscode/settings

Python Itertools组合示例 Python Itertools组合示例 Jul 31, 2025 am 09:53 AM

itertools.combinations用于生成从可迭代对象中选取指定数量元素的所有不重复组合(顺序无关),其用法包括:1.从列表中选2个元素组合,如('A','B')、('A','C')等,避免重复顺序;2.对字符串取3个字符组合,如"abc"、"abd",适用于子序列生成;3.求两数之和等于目标值的组合,如1 5=6,简化双重循环逻辑;组合与排列的区别在于顺序是否重要,combinations视AB与BA为相同,而permutations视为不同;

键盘上的音量键无法正常工作 键盘上的音量键无法正常工作 Aug 05, 2025 pm 01:54 PM

First,checkiftheFnkeysettingisinterferingbytryingboththevolumekeyaloneandFn volumekey,thentoggleFnLockwithFn Escifavailable.2.EnterBIOS/UEFIduringbootandenablefunctionkeysordisableHotkeyModetoensurevolumekeysarerecognized.3.Updateorreinstallaudiodriv

以身作则http中间件记录示例 以身作则http中间件记录示例 Aug 03, 2025 am 11:35 AM

Go中的HTTP日志中间件可记录请求方法、路径、客户端IP和耗时,1.使用http.HandlerFunc包装处理器,2.在调用next.ServeHTTP前后记录开始时间和结束时间,3.通过r.RemoteAddr和X-Forwarded-For头获取真实客户端IP,4.利用log.Printf输出请求日志,5.将中间件应用于ServeMux实现全局日志记录,完整示例代码已验证可运行,适用于中小型项目起步,扩展建议包括捕获状态码、支持JSON日志和请求ID追踪。

数据工程ETL的Python 数据工程ETL的Python Aug 02, 2025 am 08:48 AM

Python是实现ETL流程的高效工具,1.数据抽取:通过pandas、sqlalchemy、requests等库可从数据库、API、文件等来源提取数据;2.数据转换:使用pandas进行清洗、类型转换、关联、聚合等操作,确保数据质量并优化性能;3.数据加载:利用pandas的to_sql方法或云平台SDK将数据写入目标系统,注意写入方式与批次处理;4.工具推荐:Airflow、Dagster、Prefect用于流程调度与管理,结合日志报警与虚拟环境提升稳定性与可维护性。

Edge PDF查看器不起作用 Edge PDF查看器不起作用 Aug 07, 2025 pm 04:36 PM

testthepdfinanotherapptoderineiftheissueiswiththefileoredge.2.enablethebuilt inpdfviewerbyTurningOff“ eflblyopenpenpenpenpenpdffilesexternally”和“ downloadpdffiles” inedgesettings.3.clearbrowsingdatainclorwearbrowsingdataincludingcookiesandcachedcachedfileresteroresoreloresorelorsolesoresolesoresolvereresoreorsolvereresoreolversorelesoresolvererverenn

Google Chrome无法打开本地文件 Google Chrome无法打开本地文件 Aug 01, 2025 am 05:24 AM

ChromecanopenlocalfileslikeHTMLandPDFsbyusing"Openfile"ordraggingthemintothebrowser;ensuretheaddressstartswithfile:///;2.SecurityrestrictionsblockAJAX,localStorage,andcross-folderaccessonfile://;usealocalserverlikepython-mhttp.server8000tor

Python Pytest夹具示例 Python Pytest夹具示例 Jul 31, 2025 am 09:35 AM

fixture是用于为测试提供预设环境或数据的函数,1.使用@pytest.fixture装饰器定义fixture;2.在测试函数中以参数形式注入fixture;3.yield之前执行setup,之后执行teardown;4.通过scope参数控制作用域,如function、module等;5.将共用fixture放在conftest.py中实现跨文件共享,从而提升测试的可维护性和复用性。

See all articles