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一样阻塞程序的时候
因此，所有的“等待的情况”都需要异步
一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步
异步和并行
千万不要把异步和并行搞混了，
异步是单线程的，并行是多线程的
异步：主线程的任务以同步的方式执行完毕，才会去依次执行任务列队中的异步任务
并行：两个或多个事件链随时间发展交替执行，以至于从更高的层次来看，就像是同时在运行（尽管在任意时刻只处理一个事件）
Atas ialah kandungan terperinci javascript异步是什么？有什么用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk melaksanakan pengaturcaraan tak segerak dengan fungsi C++?
Apr 27, 2024 pm 09:09 PM
Ringkasan: Pengaturcaraan tak segerak dalam C++ membenarkan berbilang tugas tanpa menunggu operasi yang memakan masa. Gunakan penunjuk fungsi untuk mencipta penunjuk kepada fungsi. Fungsi panggil balik dipanggil apabila operasi tak segerak selesai. Perpustakaan seperti boost::asio menyediakan sokongan pengaturcaraan tak segerak. Kes praktikal menunjukkan cara menggunakan penunjuk fungsi dan boost::asio untuk melaksanakan permintaan rangkaian tak segerak.
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Masalah dan penyelesaian biasa dalam pengaturcaraan tak segerak dalam rangka kerja Java
Jun 04, 2024 pm 05:09 PM
3 masalah dan penyelesaian biasa dalam pengaturcaraan tak segerak dalam rangka kerja Java: Callback Hell: Gunakan Promise atau CompletableFuture untuk mengurus panggilan balik dalam gaya yang lebih intuitif. Perbalahan sumber: Gunakan primitif penyegerakan (seperti kunci) untuk melindungi sumber yang dikongsi dan pertimbangkan untuk menggunakan koleksi selamat benang (seperti ConcurrentHashMap). Pengecualian tidak terkendali: Mengendalikan pengecualian dalam tugas secara eksplisit dan menggunakan rangka kerja pengendalian pengecualian (seperti CompletableFuture.exceptionally()) untuk mengendalikan pengecualian.
Bagaimanakah rangka kerja golang mengendalikan konkurensi dan pengaturcaraan tak segerak?
Jun 02, 2024 pm 07:49 PM
Rangka kerja Go menggunakan ciri serentak dan tak segerak Go untuk menyediakan mekanisme untuk mengendalikan tugas serentak dan tak segerak dengan cekap: 1. Keselarasan dicapai melalui Goroutine, membolehkan berbilang tugasan dilaksanakan pada masa yang sama 2. Pengaturcaraan tak segerak dilaksanakan melalui saluran, yang boleh dilaksanakan tanpa menyekat utas utama Tugas 3. Sesuai untuk senario praktikal, seperti pemprosesan serentak permintaan HTTP, pemerolehan tak segerak data pangkalan data, dsb.
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Pengaturcaraan asynchronous Python: Satu cara untuk mencapai concurrency yang cekap dalam kod asynchronous
Feb 26, 2024 am 10:00 AM
1. Mengapa menggunakan pengaturcaraan tak segerak? Pengaturcaraan tradisional menggunakan penyekatan I/O, yang bermaksud program menunggu operasi selesai sebelum meneruskan. Ini mungkin berfungsi dengan baik untuk satu tugasan, tetapi mungkin menyebabkan program menjadi perlahan apabila memproses sejumlah besar tugas. Pengaturcaraan tak segerak mematahkan batasan I/O penyekat tradisional dan menggunakan I/O bukan penyekat, yang bermaksud program itu boleh mengagihkan tugas kepada utas atau gelung peristiwa yang berbeza untuk dilaksanakan tanpa menunggu tugasan selesai. Ini membolehkan program mengendalikan berbilang tugas secara serentak, meningkatkan prestasi dan kecekapan program. 2. Asas pengaturcaraan tak segerak Python Asas pengaturcaraan tak segerak Python ialah coroutine dan gelung peristiwa. Coroutine ialah fungsi yang membenarkan fungsi bertukar antara menggantung dan menyambung semula. Gelung acara bertanggungjawab untuk penjadualan
Apakah kelebihan dan kekurangan pengaturcaraan tak segerak dalam PHP?
May 06, 2024 pm 10:00 PM
Kelebihan pengaturcaraan tak segerak dalam PHP termasuk daya pemprosesan yang lebih tinggi, kependaman yang lebih rendah, penggunaan sumber yang lebih baik dan kebolehskalaan. Kelemahan termasuk kerumitan, kesukaran dalam penyahpepijatan dan sokongan perpustakaan terhad. Dalam kes sebenar, ReactPHP digunakan untuk mengendalikan sambungan WebSocket, menunjukkan aplikasi praktikal pengaturcaraan tak segerak.
Pengaturcaraan tak segerak Python: Mendedahkan intipati pengaturcaraan tak segerak dan mengoptimumkan prestasi kod
Feb 26, 2024 am 11:20 AM
Pengaturcaraan tak segerak, Pengaturcaraan Asynchronous Bahasa Inggeris, bermakna tugas tertentu dalam program boleh dilaksanakan serentak tanpa menunggu tugas lain selesai, dengan itu meningkatkan kecekapan operasi keseluruhan program. Dalam Python, modul asyncio ialah alat utama untuk melaksanakan pengaturcaraan tak segerak. Ia menyediakan coroutine, gelung acara dan komponen lain yang diperlukan untuk pengaturcaraan tak segerak. Coroutine: Coroutine ialah fungsi khas yang boleh digantung dan kemudian meneruskan pelaksanaan, sama seperti benang, tetapi coroutine lebih ringan dan menggunakan kurang memori daripada benang. Coroutine diisytiharkan dengan kata kunci async dan pelaksanaan digantung pada kata kunci tunggu. Gelung peristiwa: Gelung peristiwa (EventLoop) ialah kunci kepada pengaturcaraan tak segerak
