JavaScript 异步编程

异步编程异步的概念

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

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

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

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

什么时候用异步编程

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

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

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

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

回调函数

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

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

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

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

这段程序的执行结果是:

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

异步 AJAX

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

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

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

相关推荐
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄2 天前
JavaScript 隐式全局变量解析
javascript
沙蒿同学2 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端
paopaokaka_luck2 天前
智慧社区综合服务小程序(人脸识别、AI问答、Echarts图形化分析)
前端·javascript·spring boot·spring·数据分析·echarts
Hilaku2 天前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员
陈拉斯2 天前
给公司年会写了个大屏抽奖系统:动画在前端跑,凭什么说结果没被改?
javascript
yzy852 天前
Vue中下载或打开文件的JavaScript方法
前端·javascript·vue
用户298698530142 天前
在 React 中用 JavaScript 将 Word 转换为文本
前端·javascript·react.js
李少兄2 天前
深入解析 JavaScript 中的 `document` 对象
javascript