JavaScript 非同步 AJAX 導致後續代碼引用未定義函數：同步請求與回調重構

問題代碼

function alertWin(Cno) {
    // ... 建立彈窗 DOM ...
    $.ajax({
        url: "ShowDetail?Cno=" + Cno,
        success: function(data) { /* 這裡才有資料 */ }
    });
    // 錯誤：這裡立即執行，ajax 尚未完成
    title.innerHTML = "...需用 data 的內容...";
}

修正：將依賴回應的邏輯移入回調

$.ajax({
    url: "ShowDetail?Cno=" + Cno,
    success: function(data) {
        title.innerHTML = buildTable(data); // 這裡安全使用 data
        document.body.appendChild(msgObj);
    }
});

現代寫法

async function alertWin(Cno) {
    const resp = await fetch("ShowDetail?Cno=" + Cno);
    const data = await resp.json();
    title.innerHTML = buildTable(data);
    // ...
}

關鍵概念

• AJAX 預設非同步（async: true），success 回調在未來某個時間點執行。
• 同步 AJAX (async: false) 已棄用，會凍結主執行緒，嚴重影響使用者體驗。