JavaScript 异步编程

异步编程异步的概念

异步(, async)是与同步(, sync)相对的概念。

对于我们所学习的传统单线程编程而言, 程序的运行呈现出同步的特性, 同步并非意味着所有步骤会同时运行, 而是表明步骤会在一个控制流序列里依照顺序去执行。而异步的概念是不保证同步的那种概念, 换而言之, 一个异步过程的执行将不会再与原有的序列存在顺序关系。

也就是说, 简单理解起来, 同步是依照你的代码顺序去执行, 而异步并非按照代码顺序加以执行, 并且异步的执行效率会更高哦。

上述内容乃是针对异步概念所给出的阐释, 紧接着我们以通俗方式来解说一下异步, 异步指的是自主线程释放出一个子线程去达成任务。

什么时候用异步编程

于前端编程里(甚至后端时不时亦是如此), 当我们去处理某些简短、速率快的操控时,仿佛计算 1 + 1 的答案这般, 通常在主线程中便能够达成。主线程身为一个线程, 没办法同一时间接纳多方面的请求。因而, 一旦一个事件尚未完结, 界面就没法处理别的请求。

此刻存在一个按钮, 设想我们把其事件设成一个死循环, 这样一来, 一旦此按钮被按下, 整个网页就会失去响应。

为防止此种情况出现, 我们时常是以子线程去完成一些有可能历经足够长的时间进而被用户察觉到的事, 像读一个很大的文件或者发起一次网络请求就是这样的事。由于子线程是独立于主线程的, 因而即便出现阻塞其实也不会对主线程的运行造成影响。然而子线程存在一个限制, 一旦启动之后就会和主线程失去同步, 我们没办法确定它何时结束, 要是结束之后需要做一些事, 像处理来自服务器的信息这种事, 我们是没办法把它合并到主线程当中去的。

在解决这个问题时, 其中的异步操作函数常常借助回调函数去达成异步任务结果的处理。

回调函数

被称作回调函数的是一个函数, 当我们开启一个异步任务之际告知它, 等完成该任务后做何事, 如此以至于主线程基本上无需去关注异步任务的状态, 它自己会有始有终。

这段程序里的, 是一个耗时较长(3秒)的过程, 它的首个参数是个回调函数, 第二个参数是毫秒数, 此函数执行后会生出一个子线程, 子线程会等候3秒, 随后执行回调函数"print", 于命令行输出"!"。

当然, 其语法处在一种高度友好的状态下, 我们并不需要专门去单独定义出一个名为print的函数, 我们经常性地会致使上面所提及的程序被写成:

留意: 鉴于, 将会于子线程里等候三秒, 于函数执行完毕之后主线程并未终止, 因而:

这段程序的执行结果是:

复制代码
RUNOOB-1!    // 三秒后子线程执行
RUNOOB-2!    // 主线程先执行

异步 AJAX

并非函数的范畴, 异步 回调在AJAX编程里有着广泛的应用。至于AJAX具体的情况, 详细的内容可以参见:

经常性地被运用来请求源自远程服务器那儿的 XML 或者 JSON 数据。一个符合标准的对象通常会涵盖多个回调:

分别是函数的, 和属性的, 在它请求成功之际被调用, 在它请求失败之时被调用。若是你运用完整的库, 也能够更为优雅地运用异步AJAX:

相关推荐
Misnearch13 小时前
React中的回调
前端·javascript·react.js
Eider199814 小时前
大模型输出格式幻觉解决思路
开发语言·前端·javascript
志尊宝14 小时前
Vue3 零基础每日笔记(085):项目上线前 Checklist——环境变量、报错监控、安全自查
前端·javascript·笔记·安全·信息可视化·echarts
志尊宝15 小时前
Vue3 零基础每日笔记(088·完结):从零到一——一个完整 Vue3 项目的成长复盘
前端·javascript·vue.js·笔记·ecmascript·#vue.js
传人once15 小时前
企业官网静态页基础结构如何搭
javascript·css
桔筐15 小时前
Vue中DOM的data-*自定义属性(dataset)与Vue data响应式变量区别详解
前端·javascript·vue.js
damoluomu15 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
vipxieliang15 小时前
JavaScript 执行上下文与调用栈:从原理到调试实战
前端·javascript
西索斯coding16 小时前
Claude Code 工具调用返回空怎么办?claude-opus-5.5 的 input_schema 校验踩坑记录与修复方案
服务器·前端·javascript·ai
Jlzn888816 小时前
华南PACK线自动化率怎么统计才靠谱
前端·javascript·自动化