AJAX——事件循环(EventLoop)

1.事件循环(EventLoop)

概念:JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其它语言中的模型截然不同,比如C和Java。

原因:JavaScript单线程(某一刻只能执行一行代码),为了让耗时代码不阻塞其他代码运行,设计了事件循环模型

1.1 事件循环-执行过程

定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环。

 执行过程例子

1.2 总结

1.什么是事件循环?

执行代码和收集异步任务,在调用栈空闲时,反复调用任务队列里回调函数执行机制

2.为什么有事件循环?

JavaScript是单线程的,为了不阻塞JS引擎,设计执行代码的模型

3.JavaScript内代码如何执行?

  • 执行同步代码,遇到异步代码交给宿主浏览器环境执行
  • 异步有了结果后,把回调函数放入任务队列排队
  • 当调用栈空闲后,反复调用任务队列里的回调函数

2.事件循环-练习

使用模型,分析代码执行过程

运行结果:

3.宏任务与微任务

ES6之后引入了Promise对象,让JS引擎也可以发起异步任务

异步任务分为:

  • 宏任务:由浏览器环境执行的异步代码

  • 微任务:由JS引擎环境执行的异步代码

 

JavaScript内代码如何执行?

  1. 执行第一个script脚本事件宏任务,里面同步代码
  2. 遇到宏任务/微任务交给宿主环境,有结果回调函数进入对应队列
  3. 当执行栈空闲时,清空微任务队列,再执行下一个宏任务,从1再来

练习:事件循环经典题

运行结果:

4.Promise.all 静态方法

概念:合并多个Promise对象,等待所有同时成功完成(或某一个失败),做后续逻辑

语法:

 

需求:同时请求“北京”,“上海”,“广州”,“深圳”的天气并再网页尽可能同时显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise的all方法</title>
</head><body><ul class="my-ul"></ul><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标:掌握Promise的all方法作用,和使用场景* 业务:当我需要同一时间显示多个请求的结果时,就要把多请求合并* 例如:默认显示"北京", "上海", "广州", "深圳"的天气在首页查看* code:* 北京-110100* 上海-310100* 广州-440100* 深圳-440300*/// 1. 请求城市天气,得到Promise对象const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })// 2. 使用Promise.all,合并多个Promise对象const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])p.then(result => {// 注意:结果数组顺序和合并时顺序是一致console.log(result)const htmlStr = result.map(item => {return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`}).join('')document.querySelector('.my-ul').innerHTML = htmlStr}).catch(error => {console.dir(error)})</script>
</body></html>

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

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

相关文章

Nacos、OpenFeign、网关 笔记

一、远程调用 1.1配置RestTemplate配置类 package com.hmall.cart.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.client.RestTemplate;Configuration public c…

测试新人,如何快速上手一个陌生的系统!

大家好&#xff0c;我是狂师&#xff01; 作为刚不行不久的测试新人&#xff0c;面对一个陌生的系统时&#xff0c;可能会感到有些手足无措。面对一个全新的系统系统&#xff0c;如何快速上手并展开有效的测试工作是一个重要的挑战。 本文将探讨测试新人如何通过一系列步骤和…

VSCode SSH连接远程主机失败,显示Server status check failed - waiting and retrying

vscode ssh连接远程主机突然连接不上了&#xff0c;终端中显示&#xff1a;Server status check failed - waiting and retrying 但是我用Xshell都可以连接成功&#xff0c;所以不是远程主机的问题&#xff0c;问题出在本地vscode&#xff1b; 现象一&#xff1a; 不停地输入…

lt Redis变慢的原因及排查解决方法

前言 Redis 作为优秀的内存数据库&#xff0c;其拥有非常高的性能&#xff0c;单个实例的 OPS 能够达到 10W 左右(5-10W)。但也正因此如此&#xff0c;当我们在使用 Redis 时&#xff0c;如果发现操作延迟变大的情况&#xff0c;就会与我们的预期不符。 你也许或多或少地&…

OpenAI发布GPT-4.0使用指南

大家好&#xff0c;ChatGPT 自诞生以来&#xff0c;凭借划时代的创新&#xff0c;被无数人一举送上生成式 AI 的神坛。在使用时&#xff0c;总是期望它能准确理解我们的意图&#xff0c;却时常发现其回答或创作并非百分之百贴合期待。这种落差可能源于我们对于模型性能的过高期…

Unity 合并子物体获得简化Mesh

合并子物体获得简化Mesh &#x1f959;环境&#x1f96a;Demo &#x1f959;环境 PackageManager安装Editor Coroutines 导入插件&#x1f448; &#x1f96a;Demo 生成参数微调&#xff1a;Assets/EasyColliderEditor/Scripts/VHACDSettings/VHACDSettings.asset

【骑友警惕】停骑的惊人后果揭晓 你真的有“休息”的权利吗?

骑行&#xff0c;不仅仅是一项运动&#xff0c;它是一部分人的生活方式&#xff0c;是对自由的追逐&#xff0c;对健康的向往。然而&#xff0c;在这条充满汗水和风景的路上&#xff0c;有时候我们会因为各种原因不得不暂时停下脚步。但你知道吗&#xff1f;停骑&#xff0c;看…

Python | Leetcode Python题解之第58题最后一个单词的长度

题目&#xff1a; 题解&#xff1a; class Solution:def lengthOfLastWord(self, s: str) -> int:ls[]for i in s.split():ls.append(i)return len(ls[-1])

若依:Linux Centos 7.9 安装部署RuoYi前后端集成版

目录 1.虚拟机操作系统版本 2.删除旧的jdk 3.下载JDK 17 &#xff1a; 4.下载 mvn 3.9.6&#xff1a; 5.下载mysql:5.7.44版本 6.git下载若依&#xff1a; 7.修改数据库连接&#xff1a; 8.mvn 清理和打包 9.启动若依&#xff1a; 1.虚拟机操作系统版本 2.删除旧的jd…

UDP文件传输工具之UDP传输的优点和缺点

在当今快节奏的网络通信时代&#xff0c;UDP以其独特的优势&#xff0c;在众多应用场景中扮演着关键角色。本文将深入探讨UDP的优缺点及其应用场景&#xff0c;并重点介绍镭速软件如何通过技术创新&#xff0c;显著提升UDP传输的效率和可靠性。 UDP传输的优点 UDP的显著优势在…

pytorch-解决过拟合之regularization

目录 1.解决过拟合的方法2. regularization2. regularization分类3. pytorch L2 regularization4. 自实现L1 regularization5. 完整代码 1.解决过拟合的方法 更多的数据降低模型复杂度 regularizationDropout数据处理早停止 2. regularization 以二分类的cross entropy为例&…

mysql基础知识汇总

本文自行整理&#xff0c;只做学习记忆之用&#xff0c;若有不当之处请指出 一、数据库三层结构 &#xff08;1&#xff09;所谓安装Mysql数据库&#xff0c;就是在主机安装一个数据库管理系统(DBMS),这个管理程序可以管理多个数据库。DBMS(database manage system) &#xf…