vocus logo

方格子 vocus

EP 01 | Asynchronous JS 的運用 - 什麼是 Async JavaScript?

更新 發佈閱讀 3 分鐘

一直以來都不是很了解 promise 、 fetch 、 async await 等等的區別及運用,所以特地用這一系列的筆記加深自己的印象。

Synchronous JavaScript(同步 JS )的概念

JavaScript 是 single threaded (單執行緒 / 單線程), single threaded (單執行緒 / 單線程)簡單來說就是只有一個執行緒(主執行緒)可以用來處理工作,並且一個執行緒一次也只能完成一個工作。

詳細的解釋可以參考程序(進程)、執行緒(線程)、協程,傻傻分得清楚!

同步 JS (Synchronous JavaScript)發生情況

也因為JavaScript 是 single threaded (單執行緒 / 單線程)的,所以當 JS 中某段程式碼需要花費很長時間才能執行完畢或發送請求等待返回訊息時,在這段期間內這個執行緒是無法進行其他操作的(這種情況稱為阻塞或 blocking),一定要等該段程式碼執行完畢才能接續執行接下來的程式碼,這種狀況就被稱為同步 JS 。

// 由上到下依序執行

console.log('statement 1')

console.log('statement 2')

console.log('statement 3')

Asynchronous JavaScript(非同步 JS )的概念

Asynchronous 的概念就是為了讓程式能在同一個時間處理不同的任務,以節省等待的時間。

// 由上到下依序執行

//但 setTimeOut 裡的 console 會是最後出現 → 非同步 JS

console.log('statement 1')

setTimeout(()=>{

console.log('完成 callback fn')

},2000)

console.log('statement 2')

console.log('statement 3')

參考資料

MDN - 通用异步编程概念

程序(進程)、執行緒(線程)、協程,傻傻分得清楚!

MDN - 异步JavaScript简介

Understanding Asynchronous JavaScript


留言
avatar-img
鍋灶的熱湯
0會員
10內容數
分享生活、旅行經驗,經驗是種解決問題的方式,方式不只一種歡迎大家一起分享經驗
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
學習程式設計不再困難!本文提供一份循序漸進的 JavaScript 教學,每天只需 10 分鐘,就能從基礎語法到專案實作,逐步學習網頁開發,包含 HTML、CSS、JavaScript、DOM 操作、Canvas 等,並以 Road Map 呈現學習進度。即使零基礎也能輕鬆入門,開啟程式設計之路。
Thumbnail
學習程式設計不再困難!本文提供一份循序漸進的 JavaScript 教學,每天只需 10 分鐘,就能從基礎語法到專案實作,逐步學習網頁開發,包含 HTML、CSS、JavaScript、DOM 操作、Canvas 等,並以 Road Map 呈現學習進度。即使零基礎也能輕鬆入門,開啟程式設計之路。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
在現代 Web 開發中,框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性,也降低了理解他人程式碼的時間成本。現在,我們將以 JavaScript 為例,展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。
Thumbnail
在現代 Web 開發中,框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性,也降低了理解他人程式碼的時間成本。現在,我們將以 JavaScript 為例,展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
JSON 全名 JavaScript Object Notation,其格式基本上就是key: value的組成如下: { "name": "Bob", "age": 40, "childs": [ { "name": "Justin", "
Thumbnail
JSON 全名 JavaScript Object Notation,其格式基本上就是key: value的組成如下: { "name": "Bob", "age": 40, "childs": [ { "name": "Justin", "
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
在初學程式的時候,我曾經看室友開發專案到一半時,突然坐在那發呆,於是我好奇一問,室友說:「我在等程式編譯完成啊。」 還記得當初還是程式小菜雞的我,懞懂無知的說:「編譯?哈哈哈,我們 JavaScript 都不需要編譯耶,可以直接跑在瀏覽器上。」 室友一臉莫名其妙地回我:「噢,是嗎⋯⋯」
Thumbnail
在初學程式的時候,我曾經看室友開發專案到一半時,突然坐在那發呆,於是我好奇一問,室友說:「我在等程式編譯完成啊。」 還記得當初還是程式小菜雞的我,懞懂無知的說:「編譯?哈哈哈,我們 JavaScript 都不需要編譯耶,可以直接跑在瀏覽器上。」 室友一臉莫名其妙地回我:「噢,是嗎⋯⋯」
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News