js【详解】event loop(事件循环/事件轮询)

event loop 是异步回调的实现原理

js 代码的执行过程

  • 从前到后,一行一行执行
  • 如果某一行执行报错,则停止下面代码的执行
  • 先把同步代码执行完,再执行异步

event loop 图解

以下方代码为例:

在这里插入图片描述

第1步 将第 1 行代码放入调用栈

将要执行第1行代码放入调用栈(call stack)中

在这里插入图片描述

第2步 执行第 1 行代码,清空调用栈

执行第1行代码,在浏览器中打印 Hi,并清空调用栈
在这里插入图片描述
在这里插入图片描述

第3步 将第 3 行代码放入调用栈

在这里插入图片描述

第4步 执行第 3 行代码,设置定时器,清空调用栈

执行第3行代码,发现是一个定时任务,于是在 Web APIs 中设置一个回调函数为 cb 1 的定时器,清空调用栈
在这里插入图片描述

第5步 将第 7 行代码放入调用栈

在这里插入图片描述

第6步 执行第 7 行代码,清空调用栈,开始事件轮询

执行第7行代码,在浏览器中打印 Bye,并清空调用栈
在这里插入图片描述
此时同步代码已执行完,开始事件轮询(即不断询问回调队列中是否存在可执行代码)
在这里插入图片描述
事件轮询会一直进行,直到整个js代码不再运行(如页面被销毁)。

第7步 将定时器的回调函数放入回调队列

本例中,第3行代码设置的定时器是 5 秒,则从第4步设置定时器开始记时,5秒后,将 Web APIS 中的定时器的回调函数放入回调队列(Callback Queue)中

在这里插入图片描述

第8步 事件轮询将定时器的回调函数放入调用栈

定时器的回调函数放入回调队列的那一刻,就会被事件轮询到(若回调队列已有多个回调函数,则会按先进先出的原则依次放入调用栈),并放入调用栈
在这里插入图片描述

第9步 将第 4 行代码放入调用栈

在这里插入图片描述

第10步 执行第 4 行代码,移除调用栈中的第 4 行代码

执行第4行代码,在浏览器中打印 cb1,将第4行代码从调用栈中移除
在这里插入图片描述
在这里插入图片描述

第11步 清空调用栈,全部代码执行完毕

因回调函数 cb1内的代码已执行完毕,函数cb1 也被移出调用栈

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/522154.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

若依前后端分离版实现excel导入功能

一、引言 本文将根据若依官方文档介绍实现excel表格导入功能,已excel表格批量导入用户为功能点。 若依导入excel文档 二、Vue代码 2.1 用户模块的index.vue中导入getToken方法: import {getToken } from "@/utils/auth";2.2 用户导入参数 // 用户导入参数

模拟实现strlen函数

一、逐个计数法 #include<assert.h> #include<stdio.h>size_t my_strlen(const char* p) {int count 0;assert(p);//断言while (*p ! \0){p;count;}return count; }int main() {char str[] "hello world";size_t len my_strlen(str);printf("%d…

finishConnect(..) failed: Connection refused,服务本地正常服务器网关报400,nacos服务实例不能下线

①application里固定ip # Spring spring:cloud:inetutils:preferred-networks: 127.0.0.1 ②找到nacos服务下的protocol&#xff0c;删除下面所有&#xff0c;/nacos-server/data/protocol&#xff0c;删了不会有问题&#xff0c;而且这东西越用越大&#xff0c;删了好爽 ③重…

05-调用API

上一篇&#xff1a; 04-JNI函数 调用 API 允许软件供应商将 Java VM 加载到任意本地应用程序中。供应商可以提供支持 Java 的应用程序&#xff0c;而无需链接 Java VM 源代码。 5.1 概述 下面的代码示例说明了如何使用调用 API 中的函数。在这个示例中&#xff0c;C 代码创建了…

想开发苹果群控软件?先了解这些代码!

随着智能设备的普及&#xff0c;群控软件的需求日益增加&#xff0c;特别是针对苹果设备的群控软件&#xff0c;因其出色的性能和广泛的用户基础&#xff0c;受到了开发者们的青睐。 然而&#xff0c;开发一款功能强大的苹果群控软件并非易事&#xff0c;需要深入了解苹果的开…

配电网数字化转型全面推进:《关于新形势下配电网高质量发展的指导意见》

近日&#xff0c;国家发展改革委、国家能源局印发了《关于新形势下配电网高质量发展的指导意见》&#xff08;以下简称《意见》&#xff09;&#xff0c;到2030年&#xff0c;基本完成配电网柔性化、智能化、数字化转型&#xff0c;实现主配微网多级协同、海量资源聚合互动、多…

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(四)——前后端数据交互

经过前面几个章节的学习我们掌握了&#xff1a; 1、如何使用Vue快速搭建前端工程化项目&#xff0c;并结合elementUI优化了界面&#xff1b; 基于SpringBootVueElementUIMybatis前后端分离管理系统超详细教程&#xff08;一&#xff09; 基于SpringBootVueElementUIMybatis前后…

有没有能用蓝牙的游泳耳机?6招解决选购难题,瞄准好货!

在数字化时代&#xff0c;我们越来越依赖各种电子设备来提升生活质量。对于喜欢运动的朋友来说&#xff0c;耳机已经成为他们必不可少的装备之一。无论是跑步、健身还是游泳&#xff0c;耳机都能为我们提供美妙的音乐和清晰的语音通话&#xff0c;让我们的运动体验更加丰富多彩…

使用ffmpeg提取视频中的音频并保存为单声道wav

1 原始视频信息 通过ffmpeg -i命令查看视频基本信息 $ ffmpeg -i C0439.MP4 ffmpeg version 6.1-essentials_build-www.gyan.dev Copyright (c) 2000-2023 the FFmpeg developersbuilt with gcc 12.2.0 (Rev10, Built by MSYS2 project)configuration: --enable-gpl --enable…

根据xlsx文件第一列的网址爬虫

seleniumXpath 在与该ipynb文件同文件下新增一个111.xlsx&#xff0c;第一列放一堆需要爬虫的同样式网页 然后使用seleniumXpath爬虫 from selenium import webdriver from selenium.webdriver.common.by import By import openpyxl import timedef crawl_data(driver, url)…

骨传导蓝牙立体声耳机哪个好?骨传导耳机选购前不可忽视的几个要点

骨传导蓝牙立体声耳机是一种创新的蓝牙耳机设备&#xff0c;它通过将声音转换为特定频率的振动&#xff0c;直接通过颅骨传递到内耳&#xff0c;绕过了外耳道。这种耳机设计为一般为挂耳式&#xff0c;它无需插入耳道&#xff0c;所以不会对耳膜造成损伤&#xff0c;同时也避免…

通过sqoop把hive数据到mysql,脚本提示成功,mysql对应的表中没有数

1、脚本执行日志显示脚本执行成功&#xff0c;读写数量不为0 2、手动往Mysql对应表中写入数据十几秒后被自动删除了 问题原因&#xff1a; 建表时引擎用错了&#xff0c;如下图所示 正常情况下应该用InnoDB