iT邦幫忙

2024 iThome 鐵人賽

DAY 15
1

ES6新增了Promise功能,來優化callback function寫法。

了解Promise之前,要需先了解什麼是同步與非同步。

同步 (synchronous)

看字面意思會以為是同時執行,其實不是,而是按照順序執行。

function a(){
  console.log("我是a");
}
function b(){
 console.log("我是b"); 
}
function c() {
  console.log("我是c");
}
a();
b();
c();

//"我是a"
//"我是b"
//"我是c"

函式a完成再執行函式b,函式b完成再執行函式c,是一步一步的。
synchronous

所以如果有複雜的計算,程式碼會被阻塞,直到計算完成後,後面的程式碼才會繼續執行唷。

非同步 (asynchronous)

先看MDN 的說明:

The term asynchronous refers to two or more objects or events that do not exist or happen at the same time, that is, they are not synchronous. When multiple related things happen without any being dependent on the completion of previous happenings, they are asynchronous.
兩個或多個物件或是事件彼此之間沒有先後順序,不用等到前一個完成後才執行下一個。

也就是說程式可以不用等待非同步操作完成,它可以繼續執行後面的程式碼,不會造成阻塞。

事件是可以同時進行處理的,如圖:
asynchronous
簡單範例:

console.log(1);
console.log(2);
console.log(3);

//1
//2
//3

上面範例是我們熟悉的狀況,程式碼一行一行執行下來。

如果console.log(2)外層加上函式setTimeout,結果就不同了:

console.log(1);

setTimeout(function() {
    console.log("過1秒後印出",2);
}, 1000);

console.log(3);

執行結果:
setTimeout非同步範例執行結果

這邊舉例的setTimeout是執行環境提供的,屬於非同步,可以設定延遲幾毫秒後執行動作。

範例程式執行步驟說明:

  1. 當程式執行到setTimeout的時候,就開始計時秒數。
  2. setTimeout的callback function執行到setTimeout這行當下就註冊,計時1000毫秒後(達成條件),把註冊的callback function放進事件佇列(Event Queue)等待執行,讓setTimeout後面的程式碼可以繼續執行下去才不會卡住。。
  3. 當JavaScript主執行緒都執行完後,才執行事件佇列裡面的程式,也就是執行setTimeout的callback function。

事件佇列(Event Queue)會存放非同步的函式。

以上分享同步與非同步小觀念~謝謝!

參考資料

MDN - setTimeout
JS 原力覺醒 Day13 - Event Queue & Event Loop 、Event Table


上一篇
[Day 14] callback function 回呼函式
下一篇
[Day 16] 非同步 Promise
系列文
JavaScript學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言