当前位置: 首页 > news >正文

2024前端面试准备3-JS异步-进阶


1.请描述Event loop(事件循环)的机制。
JS是单线程的,异步需要基于毁掉来实现,event loop 就是异步回调的实现原理。
同步代码,一行一行放在Call Stack执行,遇到异步任务,标记一下让其他线程去处理(定时,网络请求等),其他线程处理完毕就放到callback Queue, 如果Call stack清空(即同步代码执行完),开始执行当前的微任务和微任务引发的微任务,执行完毕微任务队列,然后尝试进行DOM渲染,渲染结束,Event loop开始工作,轮询查找Callback Queue, 如果有则移动到Call Stack执行,然后继续重复上述步骤(永动机一样)。

2.什么是宏任务和微任务,两者有什么区别?
宏任务: setTimeout、setInterval、Ajax、DOM事件
微任务 :Promise、 async/await、
微任务执行时机比宏任务要早,微任务在DOM渲染前触发,宏任务在DOM渲染后出触发。微任务是ES6语法规定,宏任务是由浏览器规定的
3.Promise 有哪三种状态?如何变化?
三种状态:pending\resolved\rejected
pending ->resolved或pending -> rejected,变化不可逆。
resolved 会触发then回调,rejected会触发catch回调,只要回调里面没有报错,无论是then或catch返回的都是resolved状态,报错时会返回rejected状态。
4.async/await Promise的关系
执行async函数,返回的是一个Promise对象;await相当于Promise的then; try…catch可捕获异常,代替了Promise的catch。await后边的内容都可以当作异步回调的内容。

5.手写Promise

  • 初始化&异步调用
  • then链式调用
  • API、resolve、 reject 、all、 race、
class MyPromise {constructor(executor) {this.state = "pending";this.value = undefined;this.onResolveCallbacks = [];this.onRejectCallbacks = [];const resolve = (value) => {if (this.state === "pending") {this.state = "fulfilled";this.value = value;this.onResolveCallbacks.forEach((callback) => callback(this.value));}};const reject = (reason) => {if (this.state === "pending") {this.state = "rejected";this.value = reason;this.onRejectCallbacks.forEach((callback) => callback(this.value));}};try {executor(resolve, reject);} catch (error) {reject(error);}}then(onResolve, onReject) {return new MyPromise((resolve, reject) => {if (this.state === "fulfilled") {try {const result = onResolve(this.value);resolve(result);} catch (error) {reject(error);}} else if (this.state === "rejected") {try {const result = onReject(this.value);resolve(result);} catch (error) {reject(error);}} else {this.onResolveCallbacks.push((value) => {try {const result = onResolve(value);resolve(result);} catch (error) {reject(error);}});this.onRejectCallbacks.push((reason) => {try {const result = onReject(reason);resolve(result);} catch (error) {reject(error);}});}});}catch(onReject) {return this.then(null, onReject);}
}

相关文章:

2024前端面试准备3-JS异步-进阶

1.请描述Event loop(事件循环)的机制。 JS是单线程的,异步需要基于毁掉来实现,event loop 就是异步回调的实现原理。 同步代码,一行一行放在Call Stack执行,遇到异步任务,标记一下让其他线程去处…...

lm studio 0.2.24国内下载模型

1.修改C:\Users\Admin\AppData\Local\LM-Studio\app-0.2.24\resources\app\.webpack\main中的3个js文件: index.js llmworker.js worker.js 中替换huggingface.co为hf-mirror.com。这样就能实现搜索模型文件 2.点击模型,选择下载,出现下载…...

卷积池化尺寸计算公式

卷积层[Conv]: 卷积CNN是我们最常使用的,但是有时候需要观察他的输出前后的差异,这里描述下计算方式,具体如下: 图片大小:WxHxD W:宽 H:高 D:通道(RGB) 例:320x320x3 卷积核&…...

前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode

JSX <div className"container"><p onClick{onClick} data-name"p1">hello <b>{name}</b></p><img src{imgSrc}/><MyComponent title{title}></MyComponent> </div>Vue 模板 <div class"co…...

RabbitMQ启动报错:Error during startup: {error, {schema_integrity_check_failed,

报错信息如下&#xff1a; Error during startup: {error,{schema_integrity_check_failed,[{table_attributes_mismatch,rabbit_user,[username,password_hash,tags,hashing_algorithm,limits],[username,password_hash,tags,hashing_algorithm]},{table_attributes_mismatch…...

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(三)---- xv6初探与实验一(Lab: Xv6 and Unix utilities)

系列文章目录 操作系统入门系列-MIT6.S081&#xff08;操作系统&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;----课程实验环境搭建&#x…...

Java核心: 为图片生成水印

今天干了一件特别不务正业的事&#xff0c;做了一个小程序用来给图片添加水印。事情的起因是需要将自己的身份证照片分享给别人&#xff0c;手边并没有一个趁手的工具来生成图片水印。很多APP提供了水印的功能&#xff0c;但会把我的图片上传到他们的服务器&#xff0c;身份证太…...

Spark MLlib 机器学习详解

目录 &#x1f349;引言 &#x1f349;Spark MLlib 简介 &#x1f348; 主要特点 &#x1f348;常见应用场景 &#x1f349;安装与配置 &#x1f349;数据处理与准备 &#x1f348;加载数据 &#x1f348;数据预处理 &#x1f349;分类模型 &#x1f348;逻辑回归 &a…...

MySQL报ERROR 2002 (HY000)解决

今天在连接客户服务器时MySQL的时候报: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql/mysql.sock’ (2) [rootXXX ~]# mysql -uroot -p Enter password: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket…...

【校招】【社招】字节跳动UG营销算法工程师招聘

【校招】【社招】字节跳动UG营销算法工程师招聘 需要营销、广告、搜索、推荐等领域的人才加入 岗位简介 字节跳动增长智能-激励中台团队负责公司国内字节所有主要App&#xff08;包含但不仅限于抖音/抖音极速版/抖音火山版/今日头条/头条极速版/番茄小说/番茄畅听/西瓜视频&…...

Go实战 | 使用Go-Fiber采用分层架构搭建一个简单的Web服务

前言 &#x1f4e2;博客主页&#xff1a;程序源⠀-CSDN博客 &#x1f4e2;欢迎点赞&#x1f44d;收藏⭐留言&#x1f4dd;如有错误敬请指正&#xff01; 一、环境准备、示例介绍 Go语言安装&#xff0c;GoLand编辑器 这个示例实现了一个简单的待办事项&#xff08;todo&#xf…...

Web自动化测试框架+PO模式分层实战(超细整理)

前言 PO模式 在UI级的自动化测试中&#xff0c;对象设计模式表示测试正在交互的web应用&#xff0c;程序用户界面中的一个区域&#xff0c;这个是减少了代码的重复&#xff0c;也就是说&#xff0c;如果用户界面发生了改变&#xff0c;只需要在一个地方修改程序就可以了。 优…...

光猫、路由器的路由模式、桥接模式、拨号上网

下面提到的路由器都是家用路由器 一、联网条件 1.每台电脑、路由器、光猫想要上网&#xff0c;都必须有ip地址。 2.电脑获取ip 可以设置静态ip 或 向DHCP服务器(集成在路由器上) 请求ip 电话线上网时期&#xff0c;猫只负责模拟信号和数字信号的转换&#xff0c;电脑需要使…...

iOS--工厂设计模式

iOS--工厂设计模式 设计模式的概念和意义类族模式UIButton作为类族模式的例子总结 三种工厂设计模式简单工厂模式&#xff08;Simple Factory Pattern&#xff09;&#xff1a;代码实例 工厂方法模式&#xff08;Factory Method Pattern&#xff09;&#xff1a;代码实例 抽象工…...

[Python]用Qt6和Pillow实现截图小工具

本文章主要讲述的内容是&#xff0c;使用python语言借助PyQt6和Pillow库进行简单截图工具的开发&#xff0c;含义一个简单的范围裁剪和软件界面。 主要解决的问题是&#xff0c;在高DPI显示屏下&#xff0c;坐标点的偏差导致QWidget显示图片不全、剪裁范围偏差问题。 适合有一点…...

Podman和Docker的区别

Podman 和 Docker 都是用于容器化的工具&#xff0c;但它们在架构、安全性、容器编排以及一些设计理念上有显著的区别&#xff1a; 架构设计: Docker 使用客户端-服务器&#xff08;C/S&#xff09;架构&#xff0c;包含一个名为 dockerd 的守护进程&#xff0c;该进程以 root …...

Go微服务: 分布式Cap定理和Base理论

分布式中的Cap定理 CAP理论 C: 一致性&#xff0c;是站在分布式的角度&#xff0c;要么读取到数据&#xff0c;要么读取失败&#xff0c;比如数据库主从&#xff0c;同步时的时候加锁&#xff0c;同步完成才能读到同步的数据&#xff0c;同步完成&#xff0c;才返回数据给程序&…...

Mysql学习(四)——SQL通用语法之DQL

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 DQLDQL-语法基本查询条件查询聚合函数分组查询排序查询分页查询 DQL DQL数据查询语言&#xff0c;用来查询数据库中表的记录。 DQL-语法 select 字段列表 from 表…...

【ARFoundation自学05】人脸追踪(AR Face manager)实现

1. 修改摄像机朝向渲染方式-选中user 这个方式就会调用前置摄像头 2 创建 AR Session、XR Origin&#xff0c;然后在XR Origin上面添加组件 注意&#xff1a;XR Origin 老版本仍然叫 AR Session Origin 接下来在XR Origin上面添加AR Face Manager组件&#xff0c;如下图&am…...

Vulnhub-DC-2

靶机IP:192.168.20.135 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) kaliIP:192.168.20.128 扫描靶机端口及服务版本 发现开放了80和7744端口 并且是wordpress建站 dirsearch扫描目录 访问前端界面&#xff0c;发现存在重定向 在hosts文件中增加192.168.2…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...