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

目录
相关文章
|
30天前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
3天前
|
前端开发 JavaScript 开发者
JavaScript中的异步操作与回调地狱解决方法
JavaScript中的异步操作与回调地狱解决方法 在现代的Web开发中,JavaScript扮演着极为重要的角色,尤其是在处理网络请求、文件操作或者任何可能耗费时间的操作时。为了不阻塞程序的执行,JavaScript 提供了异步编程模型。本文将介绍JavaScript中的异步操作是什么,什么是回调地狱,以及如何解决回调地狱问题。 什么是异步操作? 异步操作指的是那些不会立即完成的操作,程序可以在等待异步操作完成的同时,继续执行其他代码。JavaScript通常使用事件循环机制处理异步操作,这使得它可以在不阻塞主线程的情况下执行任务。 常见的异步操作包括: 网络请求(如使用 XMLHt
6 2
|
9天前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
19 1
|
12天前
|
前端开发 JavaScript 开发者
JavaScript异步编程艺术:深入浅出回调函数与异步挑战【含代码示例】
本文深入解析JavaScript异步编程,重点探讨回调函数和异步挑战。在单线程的JavaScript中,异步编程至关重要,回调函数是其基础。然而,回调地狱问题催生了Promise和async/await的出现。文章提供代码示例展示Promise和async/await的使用,并分享异步编程最佳实践,包括错误处理、资源管理和性能优化。遇到问题时,建议通过明确异步流程、逐步调试和异常捕获来解决。最后,文章强调异步编程的未来发展,鼓励开发者掌握最新工具并探讨更高效的异步解决方案。
17 2
|
30天前
|
JavaScript 前端开发
深入理解Vue.js中的nextTick:实现异步更新的奥秘
深入理解Vue.js中的nextTick:实现异步更新的奥秘
|
1月前
|
前端开发 JavaScript UED
由于JavaScript是单线程的,因此在处理大量异步操作时,需要确保不会阻塞UI线程
【5月更文挑战第13天】JavaScript中的Promise和async/await常用于处理游戏开发中的异步操作,如加载资源、网络请求和动画帧更新。Promise表示异步操作的结果,通过.then()和.catch()处理回调。async/await作为Promise的语法糖,使异步代码更简洁,类似同步代码。在游戏循环中,使用async/await可清晰管理资源加载和更新,但需注意避免阻塞UI线程,并妥善处理加载顺序、错误和资源管理,以保证游戏性能和稳定性。
30 3
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
18 0
|
1月前
|
JavaScript 大数据 开发者
Node.js的异步I/O模型与事件循环:深度解析
【4月更文挑战第29天】本文深入解析Node.js的异步I/O模型和事件循环机制。Node.js采用单线程与异步I/O,遇到I/O操作时立即返回并继续执行,结果存入回调函数队列。事件循环不断检查并处理I/O事件,通过回调函数通知结果,实现非阻塞和高并发。这种事件驱动编程模型简化了编程,使开发者更专注业务逻辑,为高并发场景提供高效解决方案。
|
1月前
|
存储 消息中间件 Java
Java多线程实战-异步操作日志记录解决方案(AOP+注解+多线程)
Java多线程实战-异步操作日志记录解决方案(AOP+注解+多线程)
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
20 1

热门文章

最新文章