返回介绍

JavaScript 异步和 event-loop

发布于 2024-03-01 12:53:38 字数 2118 浏览 0 评论 0 收藏 0

提到异步,就必须提 event-loop 。event-loop 中文翻译叫做 事件轮询,它是能体现出单线程中异步操作是如何被执行的。

首先,强烈大家观看一个歪果仁的视频《 what the hack is event loop,只有不到半个小时的时间,但是将的非常详细。如果那个链接失效,访问 这里 (密码: xx9f)

其次,再结合阮一峰老师的《 什么是 event loop 》一起看一下。将这两个看完就基本了解 event loop 了

最后,event-loop 是一块内容比较独立的技术性知识,它是什么样子就是什么样子,讲解起来可变通性非常小。因此,本节说一下我对 event-loop 的理解和体会

本节内容概述

  • 举例说明
  • 核心概念
  • 思考两个问题

举例说明

给出一段简单的 js 代码,并用比较通俗、简单的说法介绍一下执行过程。详细过程还需各位去看视频,因为我没必要把半小时的视频都写到这里。

console.log('line 1')
setTimeout(console.log, 1000, 'line 2')
console.log('line 3')

以上一共三行代码,该程序被执行的时候,会依次挨行执行

  • 第一步,执行第一行,将结果 line 1 打印出来
  • 第二步,执行第二行,注意此时会将这个操作暂时存储到其他地方,因为 setTimeout 是一个异步执行操作。
  • 第三步,执行第三行,将结果 line 3 打印出出来
  • 第四步,等待最后一行程序(一共三行)都全部执行完了,然后立马实时查看刚才暂存的异步操作有没有。如果有可执行的,就立即拿到出来继续执行。
  • 第五步,执行完毕之后,再实时查看暂存位置中是否还有未执行的异步回调。

以上只拿了 setTimeout 举例子,但是对于网络请求、IO 操作、事件绑定道理都是一样的。如果我讲的简单例子你还是看不懂,一定要去看文章最初提到的《what the hack is event loop》视频,重要重要!

思考三个问题

第一题,以下代码的输出顺序是什么

setTimeout(console.log, 0, 'a')
console.log('b')
console.log('c')

答案是 b c a ,有疑问的需要再去看上面的介绍或者那个视频。

第二题,以下代码中,最后输出的结果是否是 500

var i, t = Date.now()
for (i = 0; i < 100000000; i++) {
}
function fn() {
    console.log(Date.now() - t)  // 输出多少???
}
setTimeout(fn, 500)

答案是大于 500ms ,因为 for 函数需要花费一些时间,等 for 执行完之后再开始计算 500ms 之后执行 fn

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文