再回到事件監聽的程式碼中，可以在箭頭函式前添加async，將其變成「非同步函式」，並且於呼叫函式前添加await，以等待呼叫函式的回傳值，避免執行結果的順序，因為變更為非同步函式而有先後不同。

// 非同步函式及await的搭配組合
searchBtnSchedule.addEventListener("click", async () => {
  console.log("🔍 查詢按鈕被點擊，開始獲取班表資料...");
  await searchSchedule(); // 呼叫資料取得邏輯
});

初次接觸到非同步函式的概念，第一個問題是那是否有同步函式的概念，及兩者差異在哪。關此問題，可從字面上直接做理解

• 同步函式，是程式碼會一行一行執行，每行執行完畢才執行下一行。因此當其中一個函式需要執行時間的話，整個畫面就需要等待其執行完成後，才能進行下一個指令，等待期間只能等待，無法進行任何動作。
• 非同步函式，則無此限制，程式碼同樣會一行一行執行，只是執行方式乃是將該函式丟到事件駐列(event queue)，依序執行，根據執行時間來依序回傳結果。
  • 這樣做的好處是，當程式執行到非同步函式時，可以不用等待其執行完成有結果後，才繼續執行下一行，等待期間若有其他新的指令或事件，都可以繼續執行，而不會卡住畫面。

但非同步函式以不用等待執行結果，所換取到可同時接受不同指令及事件的後果，就是函式回傳的結果可能會因執行時間快慢，而與程式碼撰寫的順序有所不同，導致程式錯亂。此時，會在呼叫函式前面增加await，以確保個在事件駐列中的函式，仍需等待前面的函式執行完成後，才繼續執行下一個函式，確保與程式碼順序相同。故在JavaScript中，相當常見到async與await的搭配組合。

非同步函式，在與後端聯繫的時候，相當常使用，如fetch()。為了避免自後端抓取資料的時間過長，導致整個網頁需等待執行結果，須採用非同步函式。但同時又怕執行結果與程式碼結果順序錯亂，需要再搭配await。