JS(异步与单线程)

简介: JS(异步与单线程)题目1.同步和异步的区别是什么,试举例(例子见知识点)区别:1.同步会阻塞代码执行,而异步不会2.

JS(异步与单线程)

题目1.同步和异步的区别是什么,试举例(例子见知识点)

区别:

1.同步会阻塞代码执行,而异步不会

2.alert 是同步,setTimeout 是异步

题目2.关于 setTimeout

结果:1 3 5 2 4

题目3.前端使用异步的场景有哪些

 1.定时任务:setTimeout,setInverval

2.网络请求:ajax 请求,动态<img>加载

3.事件绑定

知识点

一、什么是异步

结果:100 300 200

异步结果:100 300(不做等待) 200

同步结果:100 200(等待) 300   (会阻塞后面代码的运行)

对比同步

结果(同步):100 200(点击确认) 300  

何时需要异步

1.在可能发生等待的情况

2.等待过程中不能像 alert 一样阻塞程序运行

总之,所有的“等待的情况”都需要异步

二、前端使用异步的场景

1.定时任务:setTimeout,setInverval

2.网络请求:ajax 请求,动态<img>加载

ajax 请求示例

结果:

ajax 请求需要等待

 

过程:1.执行第一行,打印  start

          2.执行 $.get 后,函数 data1 会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)

          3.执行最后一行,打印300

          4.待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行

         5.发现暂存起来的 $.get 中的 data1 未执行,待请求 data1.json返回 后,立即执行 data1

 动态<img>加载示例

结果:

不知道图片何时完成加载,需要等待

 3.事件绑定

事件绑定示例

结果:(点击之后才出现 clicked)

 

不知道用户何时点击,需要等待

三、异步和单线程

JS 是单线程的语言,所谓“单线程”就是一根筋,对于拿到的程序,一行一行的执行,直到上面的执行为完成,只能做这一件事

 

输出:100 300 200

这个任务是串行的,不能发生阻塞,使用异步解决这种问题

过程:1.执行第一行,打印100

           2.执行setTimeout 后,传入setTimeout 的函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)

           3.执行最后一行,打印300

           4.待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行

           5.发现暂存起来的 setTimeout 中的函数无需等待时间,立即起来执行

执行程序这样没有问题,但是对于 JS 最初使用的环境 ———— 浏览器客户端 ———— 就不一样了。因此在浏览器端运行的 js ,可能会有大量的网络请求,而一个网络资源啥时候返回,这个时间是不可预估的。这种情况也要傻傻的等着、卡顿着、啥都不做吗?———— 那肯定不行。

因此,JS 对于这种场景就设计了异步 ———— 即,发起一个网络请求,就先不管这边了,先干其他事儿,网络请求啥时候返回结果,到时候再说。这样就能保证一个网页的流程运行。

目录
相关文章
|
28天前
|
编解码 数据安全/隐私保护 计算机视觉
Opencv学习笔记(十):同步和异步(多线程)操作打开海康摄像头
如何使用OpenCV进行同步和异步操作来打开海康摄像头,并提供了相关的代码示例。
63 1
Opencv学习笔记(十):同步和异步(多线程)操作打开海康摄像头
|
26天前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
24天前
|
安全 调度 C#
STA模型、同步上下文和多线程、异步调度
【10月更文挑战第19天】本文介绍了 STA 模型、同步上下文和多线程、异步调度的概念及其优缺点。STA 模型适用于单线程环境,确保资源访问的顺序性;同步上下文和多线程提高了程序的并发性和响应性,但增加了复杂性;异步调度提升了程序的响应性和资源利用率,但也带来了编程复杂性和错误处理的挑战。选择合适的模型需根据具体应用场景和需求进行权衡。
|
27天前
|
网络协议 安全 Java
难懂,误点!将多线程技术应用于Python的异步事件循环
难懂,误点!将多线程技术应用于Python的异步事件循环
51 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
19 0
|
2月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
2月前
|
设计模式 缓存 Java
谷粒商城笔记+踩坑(14)——异步和线程池
初始化线程的4种方式、线程池详解、异步编排 CompletableFuture
谷粒商城笔记+踩坑(14)——异步和线程池
|
2月前
|
JSON 前端开发 JavaScript
一文看懂 JavaScript 异步相关知识
一文看懂 JavaScript 异步相关知识
31 4
|
3月前
|
缓存 Java
异步&线程池 线程池的七大参数 初始化线程的4种方式 【上篇】
这篇文章详细介绍了Java中线程的四种初始化方式,包括继承Thread类、实现Runnable接口、实现Callable接口与FutureTask结合使用,以及使用线程池。同时,还深入探讨了线程池的七大参数及其作用,解释了线程池的运行流程,并列举了四种常见的线程池类型。最后,阐述了在开发中使用线程池的原因,如降低资源消耗、提高响应速度和增强线程的可管理性。
异步&线程池 线程池的七大参数 初始化线程的4种方式 【上篇】
|
3月前
|
Java 数据库
异步&线程池 CompletableFuture 异步编排 实战应用 【终结篇】
这篇文章通过一个电商商品详情页的实战案例,展示了如何使用`CompletableFuture`进行异步编排,以解决在不同数据库表中查询商品信息的问题,并提供了详细的代码实现和遇到问题(如图片未显示)的解决方案。
异步&线程池 CompletableFuture 异步编排 实战应用 【终结篇】