jquery - 使用 jQuery 一次加载一个函数？

Question

我有一个函数列表，我想一次加载一个。我无法让他们加载一个，然后在加载数据后转到下一个。这是我的代码：

$(document).ready(function() {
    //step through the data sets
    var count = 1;
    if (count = 1) {
        loadingAjax('connectConferenceData','connectAttendanceData',count);
    }
    if (count = 2) {
        loadingAjax('connectWorkshopData','cwsData',count);
    }
    if (count = 3) {
        loadingAjax('relayCenterData','rcData',count);
    }
    if (count = 4) {
        loadingAjax('collectionCenterData','ccData',count);
    }
    if (count = 5) {
        loadingAjax('regionalStatsData','rsData',count);
    }
    if (count > 5) {
        $("#statusMsg").html('All tools have been loaded.').fadeIn('slow');
        setTimeout(function() {
            $('#statusMsg').fadeOut();
        }, 10000 );
    }
});

//function to get datasets
function loadingAjax(div_id,action_id,count) {  
    $("#loading").show();
    $("#"+div_id).html('<img src="images/admin_uploading.gif"> Loading data...');  

    $.ajaxSetup ({  
        cache: true  
    }); 

    $.ajax({  
        type: "GET",  
        url: "dashboard_functions.php",  
        data: "actionID="+action_id,  
        success: function(data){  
            $("#"+div_id).html(data).fadeIn();
            count++; 

            if (count != 6) {
                $("#statusMsg").html('<img src="./images/admin_uploading.gif" /> Loading data for tool #'+count+' loading'); 
            }

            $("#loading").hide();
        }  
    });  
} 

Answer 1

您可以像这样设置一系列回调：

//step through the data sets
function DataSetStep(count){
 if (count == 1) {
    loadingAjax('connectConferenceData','connectAttendanceData',count);
 }
 if (count == 2) {
    loadingAjax('connectWorkshopData','cwsData',count);
 }
 if (count == 3) {
    loadingAjax('relayCenterData','rcData',count);
 }
 if (count == 4) {
    loadingAjax('collectionCenterData','ccData',count);
 }
 if (count == 5) {
    loadingAjax('regionalStatsData','rsData',count);
 }
 if (count > 5) {
    $("#statusMsg").html('All tools have been loaded.').fadeIn('slow');
    setTimeout(function() {
        $('#statusMsg').fadeOut();
    }, 10000 );
 }
}

$(document).ready(function() {
 DataSetStep(1);
});

//function to get datasets
function loadingAjax(div_id,action_id,count) {  
 $("#loading").show();
 $("#"+div_id).html('<img src="images/admin_uploading.gif"> Loading data...');  

 $.ajaxSetup ({  
    cache: true  
 }); 

 $.ajax({  
    type: "GET",  
    url: "dashboard_functions.php",  
    data: "actionID="+action_id,  
    success: function(data){  
        $("#"+div_id).html(data).fadeIn();
        count++; 

        if (count != 6) {
            $("#statusMsg").html('<img src="./images/admin_uploading.gif" /> Loading data for tool #'+count+' loading'); 
        }

        $("#loading").hide();
        DataSetStep(count);
    }  
 });  
} 

Answer 2

In your $.ajax() call set async: false.

You would then also not need your count variable or various if statements either.

Answer 3

$(document).ready(function() { ... 仅在页面加载时执行，并且仅执行第一步。尝试在 ajax 调用的成功处理程序中执行后续步骤

Answer 4

您也可以递归地执行此操作：

$(function () {
    // This is global, so do it once, outside the function
    $.ajaxSetup ({  
        cache: true  
    }); 

    loadingAjax('connectConferenceData','connectAttendanceData',1);

    function loadingAjax(divId, actionId, count) {
        $("#"+div_id).html('<img src="images/admin_uploading.gif"> Loading data...');  
        if (count !== 6) {
            $("#statusMsg").html('<img src="./images/admin_uploading.gif" /> Loading data for tool #'+count+' loading'); 
        }
        $.ajax({  
            type: "GET",  
            url: "dashboard_functions.php",  
            data: "actionID="+action_id,  
            success: function(data){  
                $("#"+div_id).html(data).fadeIn();
                count++;

                if (count === 2) {
                    loadingAjax('connectWorkshopData','cwsData',count);
                }
                if (count === 3) {
                    loadingAjax('relayCenterData','rcData',count);
                }
                if (count === 4) {
                    loadingAjax('collectionCenterData','ccData',count);
                }
                if (count === 5) {
                    loadingAjax('regionalStatsData','rsData',count);
                }
                if (count > 5) {
                    $("#statusMsg").html('All tools have been loaded.').fadeIn('slow');
                    setTimeout(function() {
                        $('#statusMsg').fadeOut();
                    }, 10000 );
                }
                $("#loading").hide();
            }  
        });    
    }
});