callback function

JavaScript 網頁事件處理 1 有提到一點點

// 只有得到遊戲資料
function getGames(callback) {
  const requestGameTop = new XMLHttpRequest();
  requestGameTop.open('GET', `${BASE_URL}/games/top?limit=5`, true);
  requestGameTop.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
  requestGameTop.setRequestHeader('Client-ID', CLIENT_ID);
  requestGameTop.send();
  requestGameTop.onload = function () {
    if (requestGameTop.status >= 200 && requestGameTop.status < 400) {
      const response = requestGameTop.responseText;
      const gameData = JSON.parse(response);
      const games = gameData.top;
      callback(games);
    } else console.log('error');
  };

  requestGameTop.onerror = function () {
    console.log('error');
  };
}

getGames((games) => {
  const navbarList = document.querySelector('.navbar_list');
  for (const game of games) {
    const ul = document.createElement('ul');
    ul.classList.add('navbar_list');
    ul.innerHTML = `
    <li class='topGamesOfFive'>${game.game.name}</div>
    `;
    navbarList.appendChild(ul);
  }
  document.querySelector('.game_title').innerText = games[0].game.name;
  // 抓取遊戲的實況內容
  getStreams(games[0].game.name);
});

為了讓 getGames 這個 function 只是單純抓取資料，讓同事若也要抓 API 就可以直接拿 getGames 這個 function 去用，我拿到資料後要實現介面，但我不行用 const games = getGames() 再執行接下來的事情，因為 getGames() 他是 AJAX 非同步，非同步只能寫 callback function 來回傳資料，以免使用 getGames 這個 function 時，資料都還沒拿到。所以程式執行順序如下 :