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)是非同步程式設計中的
