您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

jQuery getJSON 異步加載：判斷數據/ DOM 完成的三種回調時機

編輯：程式設計疑難解答

三種「完成」的區別

場景	觸發時機	適用 API
getJSON 請求成功	收到 HTTP 200 且 JSON 解析成功	`$.getJSON(url, data, successCallback)` 或 `$.ajax({...}).done()`
DOM 結構就緒	HTML 解析完畢，`document.readyState === 'interactive'`	`$(function(){ ... })` 即 `$(document).ready()`
頁面所有資源加載完畢	圖片、CSS、JS、iframe 全部下載完成	`$(window).on('load', function(){ ... })`

典型組合模式

// 1. 頁面骨架就緒 → 發起請求 → 數據到達 → 渲染
$(function() {
    $.getJSON('/api/data', function(res) {
        renderList(res); // 此處 DOM 已就緒，可直接操作
    });
});

// 2. 需等圖片/字體載入後再計算佈局（如瀑布流、懶加載）
$(window).on('load', function() {
    $.getJSON('/api/data', function(res) {
        renderMasonry(res); // 此時圖片尺寸已知
    });
});

// 3. Loading 狀態管理（請求發出 → 返回隱藏）
function loadData() {
    showLoading();
    $.getJSON('/api/data')
        .done(function(res) { render(res); })
        .fail(function() { showError(); })
        .always(function() { hideLoading(); }); // 成功/失敗都執行
}

避坑指南

❌ 在 `$(document).ready()` 外直接寫 `$.getJSON` 回調中操作 DOM（可能 DOM 還未就緒）。
❌ 用 `setTimeout` 猜測加載完成（網絡波動不可控）。
✅ **請求回調嵌套在 `$(function(){})` 內**，保證 DOM 就緒。
✅ 現代寫法：`fetch('/api/data').then(r=>r.json()).then(render).catch(handleError).finally(hideLoading)`。

**核心：明確你要等的是「數據」還是「DOM」還是「資源」，選對鉤子，不用猜。**