带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(2)

简介: 带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(2)

4. requestAnimationFrame

requestAnimationFrame是一个优化动画效果的函数,也有它在事件循环中的位置。

requestAnimationFrame 的调用是有频率限制的,在大多数浏览器里,这个频率是60Hz,也就是说,每一次刷新间隔为1000/60≈16.7ms。requestAnimationFrame 的执行时机是在下一次重绘之前,而不是立即执行。

 

requestAnimationFrame 的优点是由系统来决定回调函数的执行时机。如果系统忙到一定程度,可能会两次“刷新”之间多次执行回调函数,这时就可以省略掉一些回调函数的执行。这种机制可以有效节省 CPU 开销,提高系统的性能。

 

requestAnimationFrame 的位置在事件循环中的具体位置是视浏览器的实现而定,但一般来说,它在宏任务执行完,渲染之前,这使得其可以获取到最新的布局和样式信息。

5. Promise的发展

Promise 对象代表一个异步操作的最终完成(或失败)及其结果值。一个 Promise 处于以下状态之一:

 

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

 

一个 promise 必须处于一种状态:fulfilled、rejected 或 pending。一个 promise 的状态在 settle 之后就不能再改变。

 

Promise起初是由社区提出并实现的,最早的版本是由 Kris Kowal 提出的 Q 库,后来被 ES6 正式接受,并成为了浏览器的原生对象。

 

Promise 主要解决了两类问题:

 

  • 异步操作的一致性问题:无论异步操作是同步完成还是异步完成,使用 Promise 对象的 then 方法都可以以同样的方式进行处理。
  • 回调地狱问题:回调地狱指的是多层嵌套的回调函数,导致代码难以维护和理解。Promise 可以通过链式调用的方式,解决回调地狱问题。

我们可以通过下面的代码示例来看一下 Promise 是如何工作的:

 

let promise = new Promise(function(resolve, reject) {
  // 异步处理
  // 处理结束后、调用resolve 或 reject});
promise.then(function(value) {
  // success}, function(error) {
  // failure});

 

Promise 的状态一旦改变,就会一直保持那个状态,不会再次改变。这个特性可以让我们有序地处理异步操作的结果,避免出现复杂的状态判断。

 

以上是关于 JavaScript 中异步编程、事件循环、任务队列、宏任务、微任务,以及requestAnimationFrame在事件循环的位置,Promise 的发展和如何解决回调地狱的详细介绍。对于 JavaScript 的异步编程机制,我们应该有了全面深入的了解。

 

  1. 参考资料
  • MDN文档 - 使用 Promisesopen in new window

MDN文档 - Window.requestAnimationFrame()

相关文章
|
18天前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
32 0
|
14天前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
19天前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
61 3
|
20天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
10 1
|
17天前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
25 0
|
18天前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
15 0
|
18天前
|
监控 JavaScript 前端开发
JavaScript与Nest.js:打造高性能的服务器端应用
Nest.js是Node.js的渐进式框架,融合OOP、FP和FRP,提供模块化、装饰器和依赖注入,助建高性能服务器应用。选择Nest.js的原因包括模块化设计、简洁的装饰器API和高性能基础(如Express或Fastify)。开始使用需安装Node.js和`@nestjs/cli`,创建项目、编写控制器。深入学习涉及模块化、服务的依赖注入及中间件。安全性优化涵盖HTTPS、CORS策略、限流和性能监控。
16 0
|
19天前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
17 0
|
19天前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
12 0
|
19天前
|
JavaScript
文件查询匹配神器 【glob.js】 实用教程
文件查询匹配神器 【glob.js】 实用教程
10 0