js 程序执行与顺序实现详解

JS程序执行与顺序实现详解

JS是一门单线程语言,指在一个时间只执行一个任务。虽然JS是单线程语言,但是它可以利用事件循环和回调实现异步编程。

1. JS代码的执行顺序

JS代码是从上往下一行一行执行的,但是在执行JS代码时,遇到如下情况就会把当前任务挂起,去执行其他任务:

  1. 等待Web API返回结果,例如:发起Ajax请求等。
  2. 等待定时器。
  3. 等待事件发生。

1.1 Web API的异步处理

当执行代码中遇到Web API时,JS并不会一直等待Web API的完成,而是先将代码执行完毕,然后将Web API相关的回调函数加入异步队列中排队等待Web API返回结果,待结果返回后,JS引擎从异步队列中读取相应回调函数。

示例:

console.log('start');
setTimeout(function() {
  console.log('callback');
}, 1000);
console.log('end');

该示例中,先输出“start”,实际上是同步任务。接着执行定时器,将回调函数异步添加到任务队列中,然后输出“end”。但是需要等待1秒后,从异步队列中读取回调函数,输出“callback”。

1.2 Promise的异步处理

Promise是JS提供的异步编程的解决方案,ES6中的新特性。Promise可以将异步代码封装成Promise对象,实现更为优雅的异步代码的书写。

示例:

console.log('start');
new Promise((resolve, reject) => {
  console.log('promise start');
  setTimeout(() => {
    resolve('promise callback');
  }, 1000);
}).then((res) => {
  console.log('promise then:', res);
});
console.log('end');

该示例中,Promise的执行流程:

  1. 首先输出“start”,接着执行Promise构造函数中的代码,输出“promise start”。
  2. 调用setTimeout函数,将回调函数异步加入任务队列,会异步执行回调函数。
  3. 输出“end”。
  4. 等待1秒后,从异步队列中读取回调函数,resolve Promise,将Promise对象标记为fulfill状态,同时执行then方法中的回调函数,输出“promise then:promise callback”。

1.3 await/async

async/await是ES8中的特性,比Promise更为优雅,在异步编程中经常被使用。async/await的实现原理就是Promise。

示例:

console.log('start');

function promise() {
  return new Promise((resolve, reject) => {
    console.log('promise start');
    setTimeout(() => {
      resolve('promise callback');
    }, 1000);
  });
}

async function asyncFunction() {
  let res = await promise();
  console.log('async function:', res);
}

asyncFunction();

console.log('end');

该示例中,async/await的执行流程:

  1. 首先输出“start”,接着执行promise函数中的代码,输出“promise start”。
  2. 调用setTimeout函数,将回调函数异步加入任务队列,会异步执行回调函数。
  3. 输出“end”。
  4. 等待1秒后,从异步队列中读取回调函数,resolve Promise,将Promise对象标记为fulfill状态。
  5. await promise()执行完毕后,执行async函数中的后续代码,输出“async function:promise callback”。

2. JS事件循环机制

JS的事件循环机制是负责读取异步队列中的回调函数,并在合适的时间将其加入调用栈中,执行回调函数。

2.1 微任务

微任务包含Promise回调函数、Node.js中的process.nextTick函数以及MutationObserver回调函数等,微任务中的回调函数执行速度比较快。

示例:

Promise.resolve().then(() => {
  console.log('promise callback 1');
}).then(() => {
  console.log('promise callback 2');
});

process.nextTick(() => {
  console.log('process.nextTick callback');
});

console.log('start');

该示例中,输出顺序为:

  1. start
  2. process.nextTick callback
  3. promise callback 1
  4. promise callback 2

2.2 宏任务

宏任务包含定时器回调函数、事件回调函数等,宏任务执行速度较慢。

示例:

console.log('start');

setTimeout(() => {
  console.log('setTimout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('promise callback 1');
}).then(() => {
  console.log('promise callback 2');
});

console.log('end');

该示例中,输出顺序为:

  1. start
  2. end
  3. promise callback 1
  4. promise callback 2
  5. setTimout callback

3. JS代码执行顺序的总结

JS代码执行时:

  1. 如果遇到异步操作,则将回调函数加入异步队列中。
  2. 当同步代码执行完毕后,调用栈为空,JS引擎会读取异步队列中的回调函数,按照事件循环机制的规则取出执行。
  3. 执行完毕后,再次读取异步队列中的回调函数,如此反复,直到异步队列为空。

注意:代码的执行顺序不是绝对的,各种环境的实现可能会有所不同。

4. 小结

JS的异步执行需要遵守事件循环机制,异步操作将会加入异步队列,在适当的时间由任务队列中的事件循环机制调用栈中执行。虽然JS是单线程执行,但异步编程使代码的执行更为优雅和高效。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 程序执行与顺序实现详解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • nodejs中的fiber(纤程)库详解

    Node.js 中的 Fiber(纤程)库详解 什么是 Fiber Fiber 是一个用于实现协程的库。协程是一种用户级线程,可以在同一个进程内实现多个协程并发执行,从而实现更高效的 I/O 操作。在 Node.js 中,I/O 操作是异步的,使用回调函数等方式来进行异步调用。Fiber 可以让我们使用同步的方式来编写异步的代码,从而简化程序逻辑。 Fibe…

    JavaScript 2023年5月28日
    00
  • js字符串类型String常用操作实例总结

    JavaScript字符串类型String常用操作实例总结 JavaScript中字符串类型String是一种常用的数据类型,在日常的开发中经常被使用到。本文将对JavaScript中String类型的常用操作进行总结,并提供一些示例来加深理解。 字符串的创建 在JavaScript中,可以使用一对单引号或双引号来创建字符串,例如: let str1 = ‘…

    JavaScript 2023年5月28日
    00
  • JS中的算法与数据结构之集合(Set)实例详解

    JS中的算法与数据结构之集合(Set)实例详解 1. 什么是Set? Set 是ES6新增的数据结构,它是一种无序且唯一的数据集合,类似于数组,但是它不允许有相同的元素存在,可以用来存储任何类型的值(对象,字符串,数字等)。 Set可以显著地提高数据读取效率和数据去重的效果。 2. Set的使用方法 2.1 创建Set并添加元素 // 创建set const…

    JavaScript 2023年5月28日
    00
  • 上周方法病毒来源竟然为ad.pchome.net原来被挂马

    背景 近期有关“上周方法病毒来源竟然为ad.pchome.net原来被挂马”的消息引起了广泛关注。该事件中,许多用户访问了ad.pchome.net网站后,他们的电脑就被感染了这个叫做“上周方法”的恶意软件。 方法 如何避免这种恶意软件的感染,以下是一些防范方法供您参考: 1.更新系统和软件 恶意软件通常利用系统或软件的漏洞进行传播。因此,及时更新操作系统和…

    JavaScript 2023年6月11日
    00
  • JS时间特效最常用的三款

    JS时间特效是网站开发中经常使用的技术,比如动态时间显示、倒计时等,下面介绍三款JS时间特效,分别是CountUp.js、Moment.js和Timeago.js。 CountUp.js CountUp.js是一个小型的、跨平台JavaScript库,用于轻松地实现计数器动画。步骤如下: 首先,从GitHub仓库中下载 CountUp.js 库,并将其添加到…

    JavaScript 2023年5月27日
    00
  • vue-cli4项目开启eslint保存时自动格式问题

    下面是“vue-cli4项目开启eslint保存时自动格式问题”的完整攻略。 1. 安装必要依赖 首先,我们需要安装一些必要的依赖,以支持Eslint的自动格式化功能。具体操作如下: 安装Eslint相关依赖 npm install eslint –save-dev npm install eslint-plugin-vue –save-dev npm …

    JavaScript 2023年6月10日
    00
  • 详解原生JS动态添加和删除类

    下面就详细讲解一下“详解原生JS动态添加和删除类”的完整攻略。 概述 在前端开发中,动态改变元素的样式是十分常见的需求,其中动态添加类名和动态删除类名就是两种常见的实现方式。通过动态改变元素的类名,可以轻松实现样式的交互效果和动画效果。 动态添加类名 方法一:使用Element.classList方法 Element.classList是DOM API提供的…

    JavaScript 2023年6月10日
    00
  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法 什么是JavaScript? JavaScript 是一种用于 Web 上的编程语言。它用于为 web 页面添加交互性和动态效果。JavaScript 通常通过在网页上嵌入脚本来实现: <script type="text/javascript">…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部