function loadElementsSequentially(urls, callback) {
    let index = 0;
    
    function loadNext() {
        if (index >= urls.length) {
            if (callback) callback();
            return;
        }
        
        $.ajax({
            url: urls[index],
            success: function(data) {
                // 将加载的内容添加到页面
                $('#container').append(data);
                index++;
                loadNext();
            },
            error: function() {
                console.error('Failed to load: ' + urls[index]);
                index++;
                loadNext();
            }
        });
    }
    
    loadNext();
}

// 使用示例
const urls = ['/api/element1', '/api/element2', '/api/element3'];
loadElementsSequentially(urls, function() {
    console.log('All elements loaded in order');
});

async function loadElementsInOrder(urls) {
    for (const url of urls) {
        try {
            const response = await $.ajax(url);
            $('#container').append(response);
        } catch (error) {
            console.error(`Failed to load ${url}:`, error);
        }
    }
    console.log('All elements loaded in order');
}

// 使用示例
const urls = ['/api/element1', '/api/element2', '/api/element3'];
loadElementsInOrder(urls);

function loadWithDependencies() {
    // 先加载第一个元素
    const firstLoad = $.ajax('/api/element1');
    
    // 第一个加载完成后加载第二个
    const secondLoad = firstLoad.then(function(data1) {
        $('#container').append(data1);
        return $.ajax('/api/element2');
    });
    
    // 第二个加载完成后加载第三个
    const thirdLoad = secondLoad.then(function(data2) {
        $('#container').append(data2);
        return $.ajax('/api/element3');
    });
    
    // 处理最终结果
    thirdLoad.done(function(data3) {
        $('#container').append(data3);
        console.log('All elements loaded in order');
    }).fail(function(error) {
        console.error('Error loading elements:', error);
    });
}

loadWithDependencies();