javascript异步是什么？有什么用？
本篇文章给大家带来的内容是关于javascript异步是什么？有什么用？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
什么是js异步？
我们知道JavaScript的单线程的，这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。
这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。
ajax的同步请求就会导致浏览器产生假死，因为它会锁定浏览器的UI（按钮，菜单，滚动条等），并阻塞所有用户的交互，jquery中的ajax有这样一个同步请求的功能，一定要慎用，尤其是在请求的数据量很大的时候，要避免使用同步请求。
举几个栗子感受一下异步
后台接口使用easy-mock，官方地址：https://easy-mock.com/
ajax使用axios,基本代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript异步</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button>点击</button>
<script>
{
let myData = null
//ajax请求
function ajax() {
axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
.then(data => {
console.log("ajax返回成功");// handle success
myData = data.data
console.log(myData);
})
.catch(error => {
// console.log(error); // handle error
console.log("ajax返回失败");
})
}
}
</script>
</body>
</html>我们通过添加一些js来看下效果,
异步-定时器
console.log(myData);
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);输出,应该没什么悬念
//null //null //定时器
执行顺序：
先执行第一个 console.log(myData);
然后遇到了定时器，将定时器挂起（就是暂停了这个定时器）
继续执行第二个 console.log(myData);
没有可以执行的js代码，回头把挂起的任务继续执行下去
继续看下一个栗子
异步-ajax
console.log(myData); ajax() console.log(myData);
看下输出，依然没有悬念
//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)执行顺序和上面的定时器基本类似，不在此赘述。
将两个栗子合并，我们看下
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);输出，
//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器发现问题了吗？两个异步函数相遇了，先执行谁？谁跑的快就先执行谁？
也可以这么说，其实这引发了另外一个知识点，
任务队列和事件循环
两个 console.log(myData);是同步执行的，他们都在js的主线程上执行，
在主线程之外还存在一个任务队列，任务队列中存放着需要异步执行的内容
当主线程运行完毕之后，就会去执行任务队列中的任务（不断的重复扫描）直到任务队列清空
观察这段代码
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);输出：1，3，2，这没什么可解释的
再看一段代码
setTimeout(function(){console.log(1);}, 0);
console.log(2);输出：2，1，为什么会这样？
console.log(2);在主线程中，先执行，
setTimeout(function(){console.log(1);}, 0);放在了任务队列中，
只有在主线程执行完了才会去执行任务列队中的内容
为什么主线程的任务执行完了后需要不断的扫描任务列队中的内容呢？
看这段代码，有助于你的理解
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}我们为button按钮添加了点击事件，在浏览器刷新的同时不停地对按钮进行点击操作（当然是手动点击）
看下输出：
//null
//null
//(10次输出)点击了
//ajax返回成功
//{success: true, data: {…}}
//定时器
//点击了这样是不是可以理解为什么主线程要去循环扫描任务列队了？
事件循环的每一轮称为一个tick（有没有联想到vue中的nextTick？）
当产生用户交互（鼠标点击事件，页面滚动事件，窗口大小变化事件等等），ajax，定时器，计时器等，会向事件循环中的任务队列添加事件，然后等待执行，
前端异步有哪些场景？
定时任务：setTimeout,setInverval
网络请求：ajax请求，img图片的动态加载
事件绑定或者叫DOM事件，比如一个点击事件，我不知道它什么时候点，但是在它点击之前，我该干什么还是干什么。用addEventListener注册一个类型的事件的时候，浏览器会有一个单独的模块去接收这个东西，当事件被触发的时候，浏览器的某个模块，会把相应的函数扔到异步队列中，如果现在执行栈中是空的，就会直接执行这个函数。
ES6中的Promise
什么时候需要异步：
在可能发生等待的情况
等待过程中不能像alert一样阻塞程序的时候
因此，所有的“等待的情况”都需要异步
一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步
异步和并行
千万不要把异步和并行搞混了，
异步是单线程的，并行是多线程的
异步：主线程的任务以同步的方式执行完毕，才会去依次执行任务列队中的异步任务
并行：两个或多个事件链随时间发展交替执行，以至于从更高的层次来看，就像是同时在运行（尽管在任意时刻只处理一个事件）
以上是javascript异步是什么？有什么用？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何用 C++ 函数实现异步编程？
Apr 27, 2024 pm 09:09 PM
摘要：C++中的异步编程允许多任务处理，无需等待耗时操作。使用函数指针创建指向函数的指针。回调函数在异步操作完成时被调用。boost::asio等库提供异步编程支持。实战案例演示了如何使用函数指针和boost::asio实现异步网络请求。
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
Java框架异步编程中的常见问题与解决方案
Jun 04, 2024 pm 05:09 PM
Java框架异步编程中常见的3个问题和解决方案：回调地狱：使用Promise或CompletableFuture以更直观的风格管理回调。资源竞争：使用同步原语（如锁）保护共享资源，并考虑使用线程安全集合（如ConcurrentHashMap）。未处理异常：明确处理任务中的异常，并使用异常处理框架（如CompletableFuture.exceptionally()）处理异常。
golang框架如何处理并发和异步编程？
Jun 02, 2024 pm 07:49 PM
Go框架利用Go的并发和异步特性提供高效处理并发和异步任务的机制：1.通过Goroutine实现并发，允许同时执行多个任务；2.通过通道实现异步编程，在不阻塞主线程的情况下执行任务；3.适用于实战场景，如并发处理HTTP请求、异步获取数据库数据等。
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
Python异步编程: 实现高效并发的异步代码之道
Feb 26, 2024 am 10:00 AM
1.为什么要使用异步编程？传统编程使用阻塞式I/O，这意味着程序会等待某个操作完成，然后才能继续执行。这对于处理单个任务来说可能很有效，但对于处理大量任务时，可能会导致程序变慢。异步编程则打破了传统阻塞式I/O的限制，它使用非阻塞式I/O，这意味着程序可以将任务分发到不同的线程或事件循环中执行，而无需等待任务完成。这允许程序同时处理多个任务，提高程序的性能和效率。2.python异步编程的基础Python异步编程的基础是协程和事件循环。协程是允许函数在暂停和恢复之间切换的函数。事件循环则负责调度
PHP 异步编程的优势与劣势？
May 06, 2024 pm 10:00 PM
异步编程在PHP中的优势包括更高的吞吐量、更低的延迟、更好的资源利用和可扩展性。其劣势包括复杂性、调试难度和有限的库支持。实战案例中，ReactPHP用于处理WebSocket连接，展示了异步编程的实际应用。
Python异步编程: 揭秘异步编程的本质, 优化代码性能
Feb 26, 2024 am 11:20 AM
异步编程，英文AsynchronousProgramming，是指程序中的某些任务可以并发地执行，而无需等待其他任务完成，从而提高程序的整体运行效率。在python中，asyncio模块是实现异步编程的主要工具，它提供了协程、事件循环和其他异步编程所需的组件。协程：协程(Coroutine)是一种特殊的函数，它可以被暂停然后恢复执行，就像线程一样，但协程比线程更轻量级，内存消耗更低。协程由async关键字声明，并在await关键字处暂停执行。事件循环：事件循环(EventLoop)是异步编程中的
