到站時間是會隨著時間變化的動態資料，如果使用者要一直手動重新整理頁面才能看到最新資訊，體驗會很差。今天我們用最簡單的輪詢（Polling） 方式，讓資料每隔一段時間自動更新。

什麼是輪詢？

輪詢就是「每隔固定時間，主動問伺服器一次：有新資料嗎？」。

它不是最先進的做法（更進階的是 WebSocket 或 Server-Sent Events，能做到伺服器主動推送），但實作簡單、相容性好，非常適合像我們這樣的第一版原型。

修改 main.js，加入定時更新

// src/main.js
import { fetchBusArrivals, normalizeArrivals } from './api/tdx.js';
import { renderArrivalList } from './components/ArrivalList.js';

const arrivalContainer = document.getElementById('arrival-list');
const POLL_INTERVAL_MS = 30_000; // 每 30 秒更新一次

async function loadArrivals() {
  try {
    const raw = await fetchBusArrivals('Taipei', '0100000A00');
    const arrivals = normalizeArrivals(raw);
    renderArrivalList(arrivalContainer, arrivals);
  } catch (err) {
    console.error('更新到站資料失敗', err);
  }
}

loadArrivals(); // 一進頁面先抓一次
setInterval(loadArrivals, POLL_INTERVAL_MS); // 之後每 30 秒抓一次

為什麼是 30 秒？

這個數字不是隨便訂的，而是要在「資料新鮮度」與「API 用量／效能」之間取捨。

TDX 平台對呼叫頻率有限制，太頻繁的請求可能會被限流；太久才更新一次，使用者又會覺得資料不準。

30 秒是公車到站這類場景常見的折衷值，你之後可以依實際需求調整。

加上「最後更新時間」提示

小小的體驗優化，讓使用者知道資料的新鮮度：

function loadArrivals() {
  // ...原本邏輯
  const timeLabel = document.getElementById('last-updated');
  if (timeLabel) {
    timeLabel.textContent = `最後更新：${new Date().toLocaleTimeString()}`;
  }
}

記得在 index.html 加上對應的 <p id="last-updated"></p>。

第二階段完成

到這裡，第二階段「串接 TDX 運輸資料」正式完成：我們能取得 Token、抓資料、清理資料、顯示資料、並自動更新。

明天開始的第三階段，我們要把 Google Maps 加進來，讓使用者可以在地圖上看到路線，而不只是一份文字清單。