※ 認識非同步概念(一)

閱讀時間約 3 分鐘

※ 同步概念:

單純地「由上而下」執行程式碼,而且一次只執行一件事,也就是「按順序執行,一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢,才能繼續往下走。

※ 非同步概念:

盡可能讓主要的執行程序不需要停下來等待,若遇到要等待的事情,就發起一個「非同步處理」,讓主程序繼續執行,等到該操作執行完畢時,再回頭通知主程序,並交付處理結果。

raw-image


為了讓管理非同步的程式碼變得更簡單,語法上主要使用Promise 和 async/await ,來寫出非同步式的程式碼。

raw-image

※ 非同步注意事項:

  • JavaScript 只是擅長用非同步的方式在不同事情間「切換」,它的本質仍然是一次執行一件事 (single thread)。
  • 由於迴圈是同步執行的機制,因此不要設計一個需要跑很久的迴圈,讓程式卡住 (blocking),讓使用者陷入空等。

※ Callback function概念:

CallBack的定義:一個程式執行完再去執行另一個程式。

Callback 的必要條件:

  1. 讓函式成為另一個函式的參數:允許函數接收另一個函數作為參數,意思是允許我們將特定的行為(透過回調函數Callback)傳入到另一個函數中,並在適當的時候執行這些行為。
function A(Fn) {
console.log('Hello')
Fn()
}

function B() {
console.log('Good')
}

A(B); // 直接將 B 函數作為參數傳遞給 A

說明:

  • 當 A(B) 被調用時,B 函數當成參數被傳遞給了 A。在 A 函數內部,參數 Fn 接收到了 B 的引用。因此,當 A 內部執行 Fn() 時,它實際上是在調用 B。
  1. 讓函式控制參數函式的執行時機:意思是回調函數的執行並不是立即進行的,而是由接收回調的函數根據某些條件(如事件發生、異步操作完成等)來決定何時執行。這對於非同步來說尤其重要,例如在 JavaScript 中處理 HTTP 請求、讀取文件操作等。
function A () {
setTimeout(function() {
console.log('Hello')
}, 5)
}

function B () {
console.log('Good')
}
function C () {
console.log('Good Morining')
}
A()
B()
C()

說明:

  • 函數 A: 因為 setTimeout 本身是非同步的函式。在設定這 5 毫秒的延時內,JavaScript 不會等待,它會繼續執行後面的代碼,等到 5 毫秒到了,再切回來執行 setTimeout 裡的 console.log('hello')
  • 函數 B和函數 C立即印出"Good"和"Good Morning",都是一個同步操作在呼叫 B()(C)時就立即執行。
  • 因此,即使 setTimeout 在 A() 中設定了非常短的延遲,B() 和 C() 的輸出還是會在 setTimeout 的回調函數之前執行。

輸出的順序會是:

  1. "Good"
  2. "Good Morining"
  3. "Hello"


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    認識 JavaScript (十)
    閱讀時間約 1 分鐘
    認識 JavaScript (十一)
    閱讀時間約 2 分鐘
    認識 JavaScript (十二)
    閱讀時間約 4 分鐘
    認識 JavaScript (十三)
    閱讀時間約 1 分鐘
    認識 JavaScript (十四)
    閱讀時間約 3 分鐘
    認識 JavaScript (十五)
    閱讀時間約 9 分鐘